foreach循环的迭代之间有延迟吗？

Question

所以我正在制作一个“西蒙说”游戏。这个函数显示当前的序列。现在的问题是它并不真正按照一个漂亮的顺序进行，它似乎一次性做完所有事情。比如说颜色是“蓝色”，“红色”和“黄色”，它们会同时发生而不是按照顺序进行。我该怎么办？

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

- Scriptomaniac

---

你可以使用 setTimeout() 来分阶段显示序列中的每种颜色。 - timolawl

Answer 1

无需使用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 * index进行调整以更改延迟。

- Karl Galvez

---

所以你说这是非 JQuery 解决方案？ - Rajshekar Reddy

没有更多的jQuery解决方案 :) - Karl Galvez

这不应该工作，smh: https://scottiestech.info/2014/07/01/javascript-fun-looping-with-a-delay/ - Saad Benbouzid

Answer 2

我使用jQuery的delay函数。

以下是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。

- Oli Soproni B.

---

这个功能非常好，但是一旦添加了重复的颜色，它会被延迟很长时间。 - Scriptomaniac

@Scriptomaniac，是的，因为i = 从0开始到数组长度结束，而延迟乘以1000毫秒（1秒），要减少延迟，您可以调整乘数值。 - Oli Soproni B.