Как правильно осуществлять задержку в цикле?

Question

[Денис Букреев]

Такие дела.

Требуется пройтись по набору элементов и раздать им классы с определенным интервалом.

Пробовал в внутри цикла for() обернуть скрипт в setTimeout() - в итоге только с одним (последним) элементом происходили изменения.

for (var i = 1; i <= 5; i++)
{
	setTimeout(function()
	{
		var image = parent.find('img').eq(i),
		image.addClass('active');
	}, 500);	
}

А идей больше в голову не приходит.
Как же осуществить такое?

Comments

[Сергей delphinpro]

В гугл не ходили? Первая же ссылка в выдаче на самый популярный учебник javascript в рунете https://learn.javascript.ru/settimeout-setinterval

[Денис Букреев]

Сергей: Читать вопрос и проблему не пытались?

[Сергей delphinpro]

Денис Букреев: читать ссылки не пробовали? Там есть объяснение решения вашей проблемы. И даже примеры решений. И много чего еще интересного и полезного. :)

Answer 1

[Сергей Протько]

читаем что такое event loop, что такое колбэки и промисы и как вообще жить в асинхронном мире.

p.s. я подозреваю что число 500 там не с проста и вы таким образом хотите дожидаться окончания анимаций. Так вот, вместо хардкода значений используйте event listener и тогда задача сама собой решится.

Comments

[Денис Букреев]

Принял

Answer 2

[Михаил Белошицкий]

function asyncLoop (bound) {
    function step(i) {
        if (i > bound)
            return;
        var image = parent.find('img').eq(i),
        image.addClass('active');
        setTimeout(function () { step(i+1) }, 5000)
    }

    step(1);
}

asyncLoop(5);