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

【问题标题】：How to delay a for loop execution in Javascript如何在Javascript中延迟for循环执行
【发布时间】：2015-03-26 07:32:56
【问题描述】：

正如标题所述，我需要延迟 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 循环而不会超时。递归是要走的路吗？我该如何实施这样的解决方案？

【问题讨论】：

这个链接可能对你有帮助scottiestech.info/2014/07/01/…
希望对你有帮助jsfiddle.net/planet260/j88ocfh8/2

标签： javascript jquery recursion timeout promise

【解决方案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);
}

【讨论】：

【解决方案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();
    });
}

【讨论】：