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

我永远不会等于 sl.length 将代码更改为i >= sl.length-1

Answer 2

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

的setTimeout

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

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

<强>示例

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

jQuery中的setTimeout（）变量计时器.each

2 个答案:

的setTimeout