foreach循环的每次迭代之间的延迟?

时间:2016-04-19 01:19:06

标签: javascript jquery

所以我正在制作一个西蒙说游戏。此功能显示当前序列。它现在的问题在于它并没有真正顺利进行,它可以同时完成所有事情。比如颜色是“蓝色”,“红色”和“黄色”,它们会同时发生而不是按顺序发生。我该如何解决这个问题?

var displaySequence = function(){
    compSequence.forEach(function(color){
        $("#" + color).fadeTo(300, 0.5).fadeTo(300, 1.0);
    })
}

2 个答案:

答案 0 :(得分:16)

无jQuery解决方案。您将需要使用数组索引来给出每次调用之间等待的假象,但是每个函数已经运行。会发生什么:1秒内显示颜色1秒,2秒内显示颜色2 ......

var displaySequence = function(){
    compSequence.forEach(function(color, index){
        setTimeout(function(){
            $("#" + color).fadeTo(300, 0.5).fadeTo(300, 1.0);
        },
        1000 * index);
    })
}

调整1000 *指数以改变延迟。

答案 1 :(得分:1)

我使用了jQuery 延迟功能

这是一个javascript。

$(document).ready(function(){

  var compSequence = new Array("red", "blue", "yellow");

  var displaySequence = function() {

      $.each(compSequence, function (i, color) {
        // add delay
        $("#" + color).delay(i * 1000).fadeTo(300, 0).fadeTo(300, 1.0);
      });      
  }

  displaySequence();

});

这是DEMO