在jquery的每个循环中的setTimeout

时间:2014-02-14 04:05:18

标签: javascript settimeout

这就是我所拥有的。我的问题是,each循环不等待setTimeout完成其工作。在console.log('elmDuration = ')...执行之前我有2 slider.goToNextSlide。哪个错了。如果这是服务器端代码,我会使用生成器函数和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);
        })();
});

我坚持这个。感谢。

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:3)

如果要在超时结束时前进到下一个元素,则必须手动执行:

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);

答案 2 :(得分:2)

如果要在循环内执行代码,则必须从setTimeout中取出代码。 SetTimeout是一种在x毫秒内执行代码的方法,但在单个javascript线程可用之前它不会执行。循环将保持线程忙,所以所有seTimeouts都必须等到结束。