如何延遲每個循環迭代以創建順序效果？

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