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

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”显示 1 秒，然后“消息 2”显示 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);