Question

var playlist = [    
        ['Message 1','1000'],
        ['Message 2','6000'],
        ['Message 3','1000'],
        ['Message 4','8000']
    ];
    for (i = 0; i < playlist.length; i++) {
       setTimeout((function(x) { return function() { 
          $("content").empty().append("<p>" + playlist[x][0] + " timeout: " + playlist[x][1] + "</p>");
       }; })(i), playlist[i][1]*i)
    }

我试图创建一个计时器，其中每个setTimeout间隔的长度根据存储在数组中的变量而变化。例如，我期待消息1＆＃39;显示1秒钟，然后显示消息2＆＃39;显示6秒，依此类推。

但是，消息以意外的顺序出现，并且它们在屏幕上显示的时间段似乎与数组中指定的相应延迟无关。

理想情况下，我也希望这个过程在数组结束后循环回到数组的开头。

非常感谢任何帮助！

Answer 1

带有循环条件的

编辑：

var timer = null;
var index = -1;
var playlist = [
    { message: "Message 1", duration: 1000 },
    { message: "Message 2", duration: 6000 },
    { message: "Message 3", duration: 1000 },
    { message: "Message 4", duration: 8000 }
];

function displayNextMessage() {

    // If the next message exists...
    if (playlist[++index]) {

        // ...do something with the message here...
        console.log(playlist[index].message);

        // ...and queue the next message.
        timer = setTimeout(function () {
            displayNextMessage();
        }, playlist[index].duration);
    }

    // Otherwise, loop back to the beginning.
    else {
        index = -1;
        displayNextMessage();
    }
}

displayNextMessage();

然后，要停止循环，您可以调用：

clearTimeout(timer);

如何在具有不同超时长度的循环中使用setTimeout？

1 个答案: