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

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

2 个答案: