как добавить класс элементам с определенным интервалом
всем привет. передо мной стоит следующая задача.
к примеру есть несколько параграфов с определенным классом. нужна функция, которая будет добавлять всем этим параграфам второй класс с определенным интервалом. то есть, страница загрузилась, через секунду добавился класс к первопу <p>, потом через секунду ко второму <p> и т.д. Я использовал классы из учебника Флэнагана для добавления классов. http://jsfiddle.net/az8oaswb/1/ вот то, что у меня получилось, но к сожалению классы добавляются сразу, без интервала. подскажите, в чем может быть проблема? ps мне кажется здесь нужна именно функция setTimeout(), чтобы класс добавлялся на каждой итерации цикла. |
<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> |
: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> |
рони в своем примере ты каждую итерацию ищешь элементы в DOM
я же делаю это один раз этим мой пример лучше :dance: |
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> (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> |
Цитата:
<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>:) |
Цитата:
BETEPAH, твой getByClassName тоже в IE8 не работает ) И тем более .bind() |
Цитата:
Цитата:
|
Цитата:
<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 тормозит ? :) |
Цитата:
<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 параграфов коль спорить начал. И при чем здесь клонирование и вставка к этому примеру. Можешь рассматривать как задание заготовки |
Poznakomlus, что ты хочешь доказать?
Мое утверждение: запрос querySelector, раз в две секунды - вообще не проблема, даже с тыщей параграфов. Твое? |
и ты считаешь это правильно выполнить даже при 1000
for (var count = 0, i = 0; i < 1000; count += ++i); alert('Всего вызовов querySelectorAll - ' + count + '\nлишних итераций - ' + (count - 1)); а то, что не тормозит так это хорошо http://learn.javascript.ru/play/aXxgxb :) но зачем делать повторно вычисления которые можно сделать разово querySelectorAll я вызываю один раз, далее работаю с индексами |
:)
<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> |
Poznakomlus, выполнение чего-то "по таймауту" не предполагает скоростного выполнения.
Т.ч. пример от рони выглядит куда приятнее и понятнее... :) |
ksa,
То есть ты поддерживаешь идеологию что нужно писать понятливый код осуществляя при этом не нужные действия и вычисления для того, чтобы всем было понятно. Ок принимается точка зрения. Я привел сколько итераций лишних на 1000 |
Poznakomlus,
мысли вслух ... те кто производит операции с огромным количеством обьектов ... врятли нуждаются в простом и понятном |
Цитата:
Т.к. в примере оных просто нет. Там все действия нужные... |
Цитата:
|
Цитата:
|
:-? :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> |
рони,
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> |
Цитата:
|
А стартер хоть бы раз появился в ветке ;)
|
Большое спасибо всем вам за помощь. Этот топик показывает, что одну и ту же задачу можно решить разными способами на js
|
Часовой пояс GMT +3, время: 08:13. |