jQuery - ждет setTimeout перед следующим запуском .each()

Question

Надеюсь, вы можете дать мне быстрое решение для чего-то, с чем я борюсь. Я нашел странного человека с аналогичной проблемой, но не могу окунуться в то, что явно не может быть так сложно!

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

$('.someClass').each(function() { 
    var thisWindow = $(this); 
    var someDelay = someOtherVariable 
    setTimeout(function(){ 
     thisWindow.removeClass('hidden'); 
     console.log($(this)); 
    },someDelay); 
}); 

Я предполагаю, что какое-то очередь поможет, но я определенно не Эксперт jQuery! Ответы, которые я видел, похоже, связаны с анимацией, чего нет, поэтому я приношу свои извинения, если я пропустил что-то очевидное в своих предыдущих поисках. Приветствия.

Answer 1

Как оказалось, мне не нужно на самом деле блокировать цикл .each() для моего конкретного использования. Я просто отслеживал «totalDelaySoFar» и добавил это к задержке для каждого элемента, чтобы они закончили работать в нужное время.

я закончил с:

var totalDelay = 0; 
$('.someClass').each(function() { 
    var thisWindow = $(this); 
    var someDelay = totalDelay + someOtherVariable; 
    totalDelay += someDelay; 
    setTimeout(function(){ 
     thisWindow.removeClass('hidden'); 
     console.log($(this)); 
    },someDelay); 
}); 

Answer 2

его очень просто.

Вам необходимо предоставить счетчик с этой функцией. так:

$('.someClass').each(function(i) { 
    var thisWindow = $(this); 
    var someDelay = 500; 
    setTimeout(function(){ 
     thisWindow.removeClass('hidden'); 
     console.log($(this)); 
    },i * someDelay); 
}); 

с этим i и этим небольшим вычислением в конце каждый элемент получает 500 мс задержки.

так что для первого пошаговом:

0 * 500 = 0

второй:

1 * 500 = 500

третий:

2 * 500 = 1000

и так далее.

см работает fiddle тоже:

привет Тимофея!

Answer 3

each цикл не ждет, пока setTimeout переместится на следующий элемент, поскольку он предназначен для неблокирующего выполнения нескольких «потоков» (хотя JS на самом деле не многопоточен).

Каждый будет устанавливать отдельные параллельные таймеры для каждого элемента в вашем списке до первого запуска setTimeout. Целью setTimeout является то, что код, вызывающий ее, выполняется без прерывания и выполняет первый параметр, когда происходит таймаут.

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

Вы можете перебирать каждый элемент на согласованном наборе (используя цикл for... in) и использовать sleep (xxxx); Однако имейте в виду, что сон будет заморозить выполнение до тех пор, пока задержка не закончится, поэтому может быть не так, как вы хотите, с точки зрения пользователя.

Answer 4

Вы всегда можете использовать JQuery delay() метод:

$.each($('.foo'), function(i, item) { 
    $(item).delay(1000 * i).fadeIn(); 
}); 

Это будет исчезать в следующем .foo элемента каждую секунду.

Demo: http://jsfiddle.net/m0fxm2Lu/