foreach循環的每次迭代之間的延遲？

Question

所以我正在制作一個西蒙說游戲。 此功能顯示當前序列。 它現在的問題在於它並沒有真正順利進行，它可以同時完成所有事情。 說顏色是“藍色”，“紅色”和“黃色，它們會同時發生而不是按順序發生。我該如何解決這個問題？

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

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 *索引以更改延遲。

Answer 2

我使用了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