jQuery .each 中带有 setTimeout() 的可变计时器

Question

我想以幻灯片的形式循环播放一堆 jpg 图片。到目前为止，我一直在成功使用 setInterval。但是，我现在想让每个幻灯片放映自定义时间。例如幻灯片 1 显示 6 秒，然后幻灯片 2 显示 3 秒，等等。我尝试了以下代码：

var sl = [["PodLoop1.jpg", 6000], ["PodLoop2.jpg", 3000]];
$.each(sl, function(i, value) {
    fl = '<img src="media/' + value[0] + '" height="100%">'
    setTimeout(function(){
        $("#InnerMedia").html(fl);
        if (i >= sl.length) {
            window.location.href = "./media.php"; // refresh to restart from the beginning
        }
    }, value[1])
});

但这不起作用。它只是跳到列表中的最后一张幻灯片。我究竟做错了什么？我看过几个关于 SO 的类似问题，例如 this one，但似乎没有一个涉及可变计时器。

Answer 1

i 永远不会相等 sl.length 把代码改成i >= sl.length-1

Answer 2

您的问题是您正在使用.each 循环。

设置超时

setTimeout 的作用是在指定时间注册一个事件。现在，当您在循环中运行它时，这将注册 2 个事件，1 个在 3 秒后，另一个在 6 秒后。所以它运行正常。

要解决此问题，您必须对这些setTimeouts 进行链式初始化。您必须在另一个事件中注册新事件。

示例

function createTimeout(arr, index){
  if(!arr[index] == undefined) return;
  setTimeout(function(){
    console.log(arr[index][0]);
    createTimeout(arr, ++index)
  }, arr[index][1])
}

var sl = [["PodLoop1.jpg", 6000], ["PodLoop2.jpg", 3000]];
createTimeout(sl, 0);