在继续循环之前完成设置超时

get SetTimeout to finish before continuing loop

本文关键字：设置 超时 继续 循环      更新时间：2023-09-26

我正在尝试使用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>

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

这是你想要的：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','');               
 }

如果你想要 setTimeout 解决方案。在这里。

目录：

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

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

相关文章：