Javascript 如何延迟每个循环迭代以创建连续效果？

是否可以在

forEach

中添加延迟，以便在按顺序交换每个span

innerHTML

时可以看到轻微的延迟。在我的循环发生的那一刻，相对跨度被注入，但循环是如此之快，所有的字母同时出现。如果可能的话，将每次注射延迟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);
    }
}

函数showCity（）{
newstringar=城市[i]。拆分（“”）；
var tickerSpans=ticker.children；
forEach（函数（字母，idx）{
//每项作业延迟200毫秒？
tickerSpans[idx].innerHTML=字母；
});
i++；
如果（i您始终可以创建一个函数，该函数将继续调用自身，直到到达数组末尾，请使用递归：

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);

函数createHtml（数组、索引、元素）{
元素[index].innerHTML=array[index++]；
如果（（索引+1）您必须执行类似于第一次循环的操作，使其在200ms内运行，第二次将其设置为400ms，第三次设置为600ms，等等。JavaScript基本上是单线程的。没有“睡眠”方法。当然，这不是100%准确，因为第二个可能需要399.9ms，而不是400ms，因为每个循环迭代之间都需要一些时间。如果要设置10个字符的动画，它不会很明显。如果要设置1000万个字符的动画，它会很明显。因此，在setTimeout中包装innerHTML分配，使用idx*setTimeout持续时间。类似的东西？是的，除了，请确保您非常小心，因为闭包。您应该将字母变量和idx传递给调用setTimeout的函数。否则，您会很快发现没有动画发生，因为每次迭代都会收到“last”由于函数异步运行而导致的字母值：）