Форум

Smike · #1 (**permalink**) 22.10.2014, 23:52

всем привет. передо мной стоит следующая задача.
к примеру есть несколько параграфов с определенным классом.
нужна функция, которая будет добавлять всем этим параграфам второй класс с определенным интервалом. то есть, страница загрузилась, через секунду добавился класс к первопу <p>, потом через секунду ко второму <p> и т.д.

Я использовал классы из учебника Флэнагана для добавления классов.

http://jsfiddle.net/az8oaswb/1/

вот то, что у меня получилось, но к сожалению классы добавляются сразу, без интервала. подскажите, в чем может быть проблема?
ps мне кажется здесь нужна именно функция setTimeout(), чтобы класс добавлялся на каждой итерации цикла.

Vlasenko Fedor · #2 (**permalink**) 23.10.2014, 00:50

<style>
  .red {
    color: red;
  }
</style>
<p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
<p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
<p class="hello">Quis dolore autem voluptatibus repellat</p>
<script>
  function next(len) {
    var i = -1;
    return function () {
      i++;
      return i == len ? -1: i;
    };
  }
  var allP = document.querySelectorAll('p.hello'),
    pos = next(allP.length),
    current,
      timer = setInterval(function () {
      current = pos();
      if (current == -1) {
        clearInterval(timer);
      } else {
        allP[current].className += ' red';
      }
    }, 2000);
</script>

рони · #3 (**permalink**) 23.10.2014, 01:36

<style>
  .red {
    color: red;
  }
</style>
<p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
<p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
<p class="hello">Quis dolore autem voluptatibus repellat</p>
<script>
      var p,
      timer = setInterval(function () {
      p = document.querySelector('p.hello:not(.red)');
      p ?  p.classList.add('red') : clearInterval(timer)
    }, 2000);
</script>

Vlasenko Fedor · #4 (**permalink**) 23.10.2014, 01:52

рони в своем примере ты каждую итерацию ищешь элементы в DOM
я же делаю это один раз этим мой пример лучше

рони · #5 (**permalink**) 23.10.2014, 02:02

Poznakomlus,
да да одна функция next чего стоит

BETEPAH · #6 (**permalink**) 23.10.2014, 10:47

<style>.red {color: red}</style>
    <p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
    <p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
    <p class="hello">Quis dolore autem voluptatibus repellat</p> 
<script>
(function (nameClass, addThis) {
  var classes = document.getElementsByClassName(nameClass);
  for(var i = 0; i < classes.length; i++) {
    setTimeout(addClass.bind(false, classes[i], addThis), i*2000 + 2000);
  }
})("hello", "red");
function addClass(o, c){
    var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
    if (re.test(o.className)) return
    o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "");
}
</script>

Vlasenko Fedor · #7 (**permalink**) 23.10.2014, 12:24

Сообщение от рони

Poznakomlus,
да да одна функция next чего стоит

ок без замыканий

<style>
  .red {
    color: red;
  }
</style>
<p class="hello">Lorem ipsum dolor sit amet, consectetur</p>
<p class="hello">Sapiente in delectus dolorem reiciendis ditii</p>
<p class="hello">Quis dolore autem voluptatibus repellat</p>
<script>
  var allP = document.querySelectorAll('p.hello'),
    len = allP.length,
      i = 0,
  timer = setInterval(function () {
    if (len--) {
      allP[i++].className += ' red';
    } else {
      clearInterval(timer);
    }
  }, 2000);
</script>

danik.js · #8 (**permalink**) 23.10.2014, 12:48

Сообщение от Poznakomlus

рони в своем примере ты каждую итерацию ищешь элементы в DOM

Каким хреном это проблема? Если код от этого короче и ясней - то зачем мудрить. Одно фигово - :not() не работает в IE8.
BETEPAH, твой getByClassName тоже в IE8 не работает ) И тем более .bind()

Vlasenko Fedor · #9 (**permalink**) 23.10.2014, 13:24

Сообщение от danik.js

Каким хреном это проблема?

Сообщение от danik.js

Одно фигово - :not() не работает в IE8

А еще возьми так 10000 парагрофов и прйдись по ним каждую итерацию

danik.js · #10 (**permalink**) 23.10.2014, 13:41

Сообщение от Poznakomlus

А еще возьми так 10000 парагрофов и прйдись по ним каждую итерацию

Ок:

<body>
<script>var p = document.createElement('p');
p.className = 'hello red';
for (var i = 0; i < 999;i++) {
     document.body.appendChild(p.cloneNode(false));
}
p.className = 'hello';
document.body.appendChild(p);

var t = new Date();
p = document.querySelector('p.hello:not(.red)');
alert(new Date() - t);
</script>
</body>

Сколько мс у тебя тратится? UI тормозит ?

Форум

Справочник

Discord чат

Курсы javascript