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

Vlasenko Fedor 23.10.2014 13:51

Цитата:

Сообщение от danik.js (Сообщение 337095)
Если код от этого короче

<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 a=document.querySelectorAll("p.hello"),b=a.length,c=0,d=setInterval(function(){b--?a[c++].className+=" red":clearInterval(d)},2E3);
</script>

Таймер где в примере. Поставь 10000 параграфов коль спорить начал. И при чем здесь клонирование и вставка к этому примеру. Можешь рассматривать как задание заготовки

danik.js 23.10.2014 14:04

Poznakomlus, что ты хочешь доказать?
Мое утверждение: запрос querySelector, раз в две секунды - вообще не проблема, даже с тыщей параграфов.

Твое?

Vlasenko Fedor 23.10.2014 14:19

и ты считаешь это правильно выполнить даже при 1000
for (var count = 0, i = 0; i < 1000; count += ++i);
  alert('Всего вызовов querySelectorAll - ' + count + '\nлишних итераций - ' + (count - 1));

а то, что не тормозит так это хорошо http://learn.javascript.ru/play/aXxgxb :)
но зачем делать повторно вычисления которые можно сделать разово querySelectorAll я вызываю один раз, далее работаю с индексами

рони 23.10.2014 14:56

:)
<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 pAll = [].slice.call(document.querySelectorAll('p.hello')),
      timer = setInterval(function () {
      pAll.length ?  pAll.shift().classList.add('red') : clearInterval(timer)
    }, 2000);
</script>

ksa 23.10.2014 15:49

Poznakomlus, выполнение чего-то "по таймауту" не предполагает скоростного выполнения.

Т.ч. пример от рони выглядит куда приятнее и понятнее... :)

Vlasenko Fedor 23.10.2014 16:00

ksa,
То есть ты поддерживаешь идеологию что нужно писать понятливый код осуществляя при этом не нужные действия и вычисления для того, чтобы всем было понятно.
Ок принимается точка зрения. Я привел сколько итераций лишних на 1000

рони 23.10.2014 16:30

Poznakomlus,
мысли вслух ... те кто производит операции с огромным количеством обьектов ... врятли нуждаются в простом и понятном

ksa 23.10.2014 16:39

Цитата:

Сообщение от Poznakomlus
осуществляя при этом не нужные действия

Вот эта приписка мне не понятна... :D
Т.к. в примере оных просто нет. Там все действия нужные...

ksa 23.10.2014 16:41

Цитата:

Сообщение от Poznakomlus
Я привел сколько итераций лишних на 1000

Да хоть на мильен! Там все действия делаются с интервалом. Т.е. никакого ускорения и не требуется...

BETEPAH 23.10.2014 21:27

Цитата:

Сообщение от danik.js
BETEPAH, твой getByClassName тоже в IE8 не работает )

ага. Только это не мой, эта часть взята из топика ;)

рони 24.10.2014 03:40

:-? :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 pAll = document.querySelectorAll('p.hello'), i = 0, p,
      timer = setInterval(function () { p = pAll[i++];
      p ?  p.classList.add('red') : clearInterval(timer)
    }, 2000);
</script>

Vlasenko Fedor 24.10.2014 12:01

рони,
http://caniuse.com/#search=classList
и так в скором времени ты напишешь мой вариант :)
<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 () {
    len-- 
	? allP[i++].className += ' red'
	: clearInterval(timer);
  }, 2000);
</script>

ksa 24.10.2014 14:48

Цитата:

Сообщение от Poznakomlus
в скором времени ты напишешь мой вариант

Так он и твой сильно поменялся по отношении к первому варианту. :D

BETEPAH 24.10.2014 16:57

А стартер хоть бы раз появился в ветке ;)

Smike 26.10.2014 12:50

Большое спасибо всем вам за помощь. Этот топик показывает, что одну и ту же задачу можно решить разными способами на js


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