Question

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

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

＆＃13;

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

＆＃13;

P {
    color:black;
}

＆＃13;

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

＆＃13;

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以停止调用该函数。

Answer 2

这就是你想要的：http://jsfiddle.net/8chu18k9/1/

var array = $(".one");
var i = 0;

var doIt = function () {

    setTimeout(loopIt, 500)       
};

var loopIt = function() {

    if(i < array.length) {
        console.log("inner loop")
          array.eq(i).css('color','red');   
        if(i > 0) {
            array.eq(i-1).css('color','');               
        }        
        i++
        setTimeout(loopIt, 500)
    }    
}


doIt();

如果您不希望字母返回黑色，请删除：

 if(i > 0) {
     array.eq(i-1).css('color','');               
 }

Answer 3

如果您需要setTimeout解决方案。在这里。

HTML：

<p>
  <span class="one">H</span>
  <span class="one">e</span>
  <span class="one">l</span>
  <span class="one">l</span>
  <span class="one">o</span>
  <span class="one"> M</span>
  <span class="one">y </span>
  <span class="one">N</span>
  <span class="one">a</span>
</p>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

的CSS：

P {
    color:black;
}

JS：

var delayBase = 10;
var baseDuration = 500; //Time at which each span stays red for

$(document).ready(function(){
  $(".one").each(function(){
    flash($(this), delayBase, baseDuration);
    delayBase+=1000;
  });
});

function flash($element, delay, flashDuration){ 
  //set red
  setTimeout(function(){
    $element.css('color', 'red');
  }, delay );
  //set black
  setTimeout(function(){
    $element.css('color', 'black');
  }, (delay+flashDuration) );
}

codepen示例：http://codepen.io/anon/pen/zxzeKE

在继续循环之前让SetTimeout完成

3 个答案: