Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   как добавить класс элементам с определенным интервалом (https://javascript.ru/forum/events/51063-kak-dobavit-klass-ehlementam-s-opredelennym-intervalom.html)

Smike 22.10.2014 23:52

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

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

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

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

Vlasenko Fedor 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>

рони 23.10.2014 01:36

:write:
<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 23.10.2014 01:52

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

рони 23.10.2014 02:02

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

BETEPAH 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 23.10.2014 12:24

Цитата:

Сообщение от рони (Сообщение 337045)
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 23.10.2014 12:48

Цитата:

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

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

Vlasenko Fedor 23.10.2014 13:24

Цитата:

Сообщение от danik.js
Каким хреном это проблема?

Цитата:

Сообщение от danik.js
Одно фигово - :not() не работает в IE8

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

danik.js 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 тормозит ? :)


Часовой пояс GMT +3, время: 18:03.