如何延迟每个循环迭代以创建顺序效果？

Question

是否可以在forEach内部添加延迟，以便在将每个span innerHTML HTML按顺序交换出来时看到轻微的延迟。 在我的循环发生的那一刻，相对跨度被注入，但是循环如此之快，以至于所有字母同时出现。 如果可能的话，最好将每次注入延迟200毫秒，我只是在做一个空白上做一下。

JS代码段

function showCity() {
    newStringArr = cities[i].split('');

    var tickerSpans = ticker.children;      
    newStringArr.forEach(function(letter, idx) {

        // Delay each assignment by 200ms?
        tickerSpans[idx].innerHTML = letter;

    });

    i++;

    if(i <= 2) {
        setTimeout(function() {
            randomWordInterval = setInterval(randomiser, SPEED, false);
        }, PAUSE);
    }
}

代码链接http://codepen.io/styler/pen/jPPRyy?editors=001

Answer 1

您可以始终 创建一个继续调用自身的函数，直到到达数组末尾为止 使用递归：

function createHtml(array, index, elems) {
    elems[index].innerHTML = array[index++];
    if ((index + 1) <= array.length) {
        setTimeout(function() {
            createHtml(array, index, elems);
        }, 200);
    }
}

var newStringArr = cities[i].split('');
var tickerSpans = ticker.children;

createHtml(newStringArr, 0, tickerSpans);

工作演示： http : //codepen.io/anon/pen/PqPjqe