Имею светофор - 3 цвета:
<div class="green" id="ready"></div>
<div class="orange" id="steady"></div>
<div class="red" id="go"></div>
и массив:
var status = ["ready", "steady", "go"];
Я хочу добавить и удалить класс (для имитации мигания) из каждого цикла в бесконечности с некоторой задержкой, но этот код делает все это за один раз. Как я могу это решить?
jQuery.each(status, function() {
setTimeout(function() {
$("#" + this).addClass('active');
}, 3000);
});
Вы настраиваете все на запуск сразу. Каждый раз умножайте на индекс.
$('#ready, #steady, #go').each(function(i) {
var el=$(this);
setTimeout(function() {
el.addClass('active');
}, i * 3000);
});
Обратите внимание, что i в первом экземпляре равно 0, поэтому, если вы хотите #ready подождать 3 секунды, используйте (i+1) * 3000
Кроме того, $('#'+this) неверный синтаксис, это $(this), однако это не сработает внутри setTimeout.
Используйте setInterval вместо setTimeout для запуска цикла до бесконечности (если не снят).
Попробуй это:
var status = ["ready", "steady", "go"];
var i=1;
jQuery(status).each(function(index,value) {
var self=this;
setTimeout(function() {
$(self).addClass('active');
}, 3000*i);
i++;
});
Fiddle: http://jsfiddle.net/M9NVy/
i, если вы уже создаете index?
- person Popnoodles; 05.08.2015
index+1.
- person Rohan Kumar; 06.08.2015
Я бы сказал, что вам лучше цепляться за свою конечную цель.
1) Настройте функцию для красного цвета. в конце красного функционального расписания желтый с установленным таймаутом 1000 мс. 2) В конце желтого расписания таймаут 1000 мс для красного
3) В конце зеленого расписания таймаут 1000 мс для зеленого.
4) запустите свой код, вызвав red ()
Теперь он будет повторяться бесконечно, не увеличивая время ожидания.
Если вам это не нравится, я бы использовал setInterval, а не setTimeOut, но вам может понадобиться больше математики.
