如何在Javascript中延迟for循环执行

Question

正如标题所述，我需要延迟for循环的每次迭代。以下是我在Stack Overflow的几个帖子中发现的内容：

var my_event_num = $(this).data('eventnum');
for (var i = 0; i < motion_media[my_event_num].length; i++) {
    (function(index) {
        setTimeout(function() { 
            $("#slideshow-" + my_event_num).attr('src', 'motion-media/' + motion_media[my_event_num][index]) 
        }, 2000);
    })(i);
}

motion_media—阵列的阵列。my_event_num—指向motion_media中索引的有效指针。

然而，这（以及其他几个解决方案）对我不起作用——它立即执行整个for循环，没有超时。递归会是一种方式吗？我该如何实施这样的解决方案？

Answer 1

试试这个代码：

var my_event_num = $(this).data('eventnum');
for (var i = 0; i < motion_media[my_event_num].length; i++) {
    (function(index) {
        setTimeout(function() { 
            $("#slideshow-" + my_event_num).attr('src', 'motion-media/' + motion_media[my_event_num][index]) 
        }, 2000*i);
    })(i);
}

Answer 2

递归会是一种方式吗？

是的，使用伪递归是一个简单的，可能也是最好的解决方案。

var my_event_num = $(this).data('eventnum');
(function go(index) {
    if (i < motion_media[my_event_num].length) {
        $("#slideshow-" + my_event_num).attr('src', 'motion-media/' + motion_media[my_event_num][index]);
        setTimeout(function() {
            go(i+1);
        }, 2000);
    }
}(0));

然而，你也问过承诺。使用jQuery的delay和promise动画队列方法，您可以设计一个类似的简单承诺序列：

var my_event_num = $(this).data('eventnum');
var promise = $.when();
for (var i = 0; i < motion_media[my_event_num].length; i++) {
    promise = promise.then(function() {
        return $("#slideshow-" + my_event_num)
          .attr('src', 'motion-media/' + motion_media[my_event_num][index])
          .delay(2000)
          .promise();
    });
}