javascript - jquery的每个循环中的setTimeout

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