javascript - 在继续循环之前让 SetTimeout 完成

Question

我正在尝试使用 Javascript/jquery 让一排字母逐个点亮。我使用 span 元素创建了一个数组，并循环遍历每个字母，首先将其颜色更改为红色，然后再次更改为黑色。问题是 $.each 循环函数不会等待 setTimeout 完成...它会立即循环所有这些函数，使它们立即全部变成红色，而不是一一变成红色。任何想法如何解决这一问题？这是我的代码:

JSFiddle:http://jsfiddle.net/john23/8chu18k9/

var array = $(".one");

var doIt = function () {
    $.each(array, function(index, value){
            array.eq(index).css('color','red');
        setTimeout(function(){
            array.eq(index).css('color','black');                                
        }, 500);
    });

};

doIt();

P {
    color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <span class="one">H</span><span class="one">e</span><span class="one"></span><span class="one">l</span><span class="one">l</span><span class="one"></span><span class="one">o</span><span class="one"> M</span><span class="one"></span><span class="one">y </span><span class="one">N</span><span class="one"></span><span class="one">a</span>
</p>

Answer 1

setTimeout 是异步的。它将立即将控制权返回给调用上下文，因此此代码将无法按预期工作。我建议使用 setInterval 来代替，它以给定的时间间隔重复运行相同的函数:

var array = $('.one');
var currentIndex = 0;
var intervalId = setInterval(function(){
  array[currentIndex].css('color','black');
  currentIndex++;
  // We've reached the end of the array, stop calling this function
  if (currentIndex == array.length) clearInterval(intervalId);
}, 500);

澄清一点:setInterval 将返回一个 ID。然后，您可以将该 ID 传递给函数 clearInterval 以停止该函数的调用。