Javascript:使用Delay循环播放数组

我试图循环一个数组,但想要延迟输出数组的每个值.这就是我目前对它应该如何工作的理解:

编辑

要求JS小提琴: http://jsfiddle.net/d3whkjww/

loopThroughSplittedText: function(splittedText) {

        for (var i = 0; i < splittedText.length; i++) {
            // for each iteration console.log a word
            // and make a pause after it
            setTimeout(
                console.log(splittedText[i]),
                1000
            );
        };

    },

然而,它不起作用,我相信它可能是,因为“for”循环中的参数必须在setTimeout函数内.但我不知道如何使它发挥作用.

我得到的只是数组的每个值,但我希望它们出现延迟.我怎么做?

在我的示例中,它将向您展示如何有争议地循环遍历数组直到您停止.这是为了让您了解如何延迟.它还会显示实际显示值的时间.

我会说你实际上可以从这个计时器创建一个很好的实用进程,并将它用于多种用途,并使用该实用进程它将阻止你重复大块的代码.

JavaScript循环示例:

var body = document.body;
var splittedText = ["Hello", "World", "How", "Are", "You", "Today"];

loopThroughArray(splittedText, function (arrayElement, loopTime) {
    body.innerHTML += arrayElement+ ": " + loopTime+ "<br/>";
}, 1000);

function loopThroughArray(array, callback, interval) {
    var newLoopTimer = new LoopTimer(function (time) {
        var element = array.shift();
        callback(element, time - start);
        array.push(element);
    }, interval);

    var start = newLoopTimer.start();
};

// Timer 
function LoopTimer(render, interval) {
    var timeout;
    var lastTime;

    this.start = startLoop;
    this.stop = stopLoop;

    // Start Loop
    function startLoop() {
        timeout = setTimeout(createLoop, 0);
        lastTime = Date.now();
        return lastTime;
    }
    
    // Stop Loop
    function stopLoop() {
        clearTimeout(timeout);
        return lastTime;
    }
    
    // The actual loop
    function createLoop() {
        var thisTime = Date.now();
        var loopTime = thisTime - lastTime;
        var delay = Math.max(interval - loopTime, 0);
        timeout = setTimeout(createLoop, delay);
        lastTime = thisTime + delay;
        render(thisTime);
    }
}

翻译自:https://stackoverflow.com/questions/30865456/javascript-loop-through-array-with-delay