Определите тайм-ауты между шагами цикла jQuery.each()

Насколько я знаю, $.each() это синхронная функция, так что я думаю, что каким-то образом должна быть возможность - с какой-то техникой - отложить шаги цикла по массиву.

Я еще не нашел правильный путь. Как я мог правильно установить таймауты для его шагов?

ОБНОВИТЬ:

Проблема, зачем мне это нужно, состоит в том, что количество шагов в цикле и вычисления огромны, и они делают асинхронные функции слишком медленными. Я хотел бы сэкономить для них частоту процессора, определив "приоритеты" с этой задержкой. Я использую функцию без обратного вызова, в основном jQuery.css() в шагах цикла.

ВАЖНЫЙ:

Я ищу технику, чтобы установить задержки между шагами, чтобы уменьшить количество вычислений, а не устанавливать ОГРОМНОЕ количество таймаутов с циклом, что будет выполняться по времени.

Источник

3 ответа

Решение

Я бы предложил не использовать .each() но зацикливание коллекции вручную.

HTML

<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>
<div class="foo">D</div>
<div class="foo">E</div>

Javascript

var collection = $('.foo');
if( collection.length > 0 ){
    var i = 0;
    var fn = function(){
        var element = $(collection[i]);
        console.log(i + ' (' + element.text() + ') : %o', element);
        // Do whatever
        if( ++i < collection.length ){
            setTimeout(fn, 5000);
        }
    };
    fn();
}

Может быть довольно легко обернута в $('.foo').delayedEach(5000, function(){}) расширение, если вы хотели.

Рабочая скрипка

Источник

В зависимости от вашей ситуации, что-то вроде этого может работать:

$('.some-results').each(function(i) {
  $(this).delay(500 * i).someAction();
});

В этом примере вы используете номер индекса (i) массива, чтобы каждая итерация была задержана на 500 мс больше, чем предыдущая. Надеюсь это поможет.

ПРИМЕЧАНИЕ. В случае, если неясно, someAction() может быть тем, что вы планируете делать с элементом. Может быть анимация, получение значения и т. Д.

Источник

Попробуйте этот код:

HTML

<div class="result"></div>
<div class="result"></div>
<div class="result"></div>

Javascript

$('.result').each(function(i) {
  setTimeout(function(){ alert(i);},5000*i);
});

Рабочая JSFiddle

Источник
Другие вопросы по тегам