setTimeout jQuery的每个循环

Question

这就是我所拥有的。我的问题是，each循环不等待setTimeout来完成它的工作。在执行slider.goToNextSlide之前，我有2 console.log('elmDuration = ')...。这是错误的。如果这是一个服务器端代码，我会使用生成器函数和yield，但不会。

$('li').each(function(index, elm){ 
     var image = $(elm).find('img')[0]; 
     var video = $(elm).find('video')[0]; 
     var media = image || video; 

     var elmDuration = $(media).attr('data-duration'); 
     console.log("elmDuration = ", elmDuration); 
     (function(){ 
      setTimeout(slider.goToNextSlide, elmDuration * 1000); 
     })(); 
}); 

我困住了这个。谢谢。

Answer 1

如果要前进到下一个元素时超时完成后，你必须这样做手工：

var $lis = $('li'); 
var index = 0; 

function next(index) { 
    var elem = $lis[index]; 
    var image = $(elm).find('img')[0]; 
    var video = $(elm).find('video')[0]; 
    var media = image || video; 

    // if there is always going to be either an img **or** a video element, 
    // you can directly do 
    // var elmDuration = $(elem).find('img, video').attr('data-duration'); 
    var elmDuration = $(media).attr('data-duration'); 
    console.log("elmDuration = ", elmDuration); 

    setTimeout(function() { 
     slider.goToNextSlide(); 
     if (index < ($lis.length - 1)) { 
      next(++index); 
     } 
    }, elmDuration * 1000); 
} 

next(index); 

Answer 2

each循环不会等待setTimeout。在setTimeout开始发射之前，它将执行$('li')中的所有元素。 setTimeout的目的是让调用它的代码不受中断地执行，并在发生超时时执行第一个参数。

Answer 3

如果您希望它在循环内执行，您必须将代码从setTimeout中取出。 SetTimeout是以毫秒为单位执行代码的一种方式，但直到单个JavaScript线程可用时才会执行。循环会使线程繁忙，因此所有seTimeout都必须等到结束。