延遲在for循環中有if/else語句的迭代

Question

我想讓西蒙說遊戲。我有一個函數遍歷數組數組。每個數字都與一個動作相關聯（所以適當的按鈕動畫）。當序列只有1個值時，這個工作正常，但是他們都只是一次玩。我已經找到了在迭代之間加入延遲的方法，但是對於包含if/else語句的循環沒有任何發現。

我想一個解決方案，我發現here：

function show_sequence() { 
    var k = right_seq.length; 

    //assign each button a number 
    //when the loop goes over it that button's animation plays 
    (function animation(i) { 
      setTimeout(function() { 
      if (i == 1) { 
       setTimeout(function() { 
        TweenMax.from("#pink", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}); 
        one.play(); 
       }, 1000); 
      } else if (i == 2) { 
       setTimeout(function() { 
        TweenMax.from("#blue", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}); 
        two.play(); 
       }, 1000); 
      } else if (i == 3) { 
       setTimeout(function() { 
        TweenMax.from("#yellow", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}); 
        three.play(); 
       }, 1000); 
      } else { 
       setTimeout(function() { 
        TweenMax.from("#green", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}); 
        four.play(); 
       }, 1000); 
      }; //end for loop 
      if (--i) { 
       animation(i); 
      } 
     }, 200); 
})(k); 
} 

和它的作品，因爲它增加了動畫和聲音之間的延遲，但它並沒有以正確的順序播放。例如，如果數組爲[3,4,1,2]，則不會將動畫放置在這些按鈕上，但是按[4,3,2,1]順序排列，並且它不能運行超過4輪。

這是fiddle但遊戲沒有完成，所以我不知道它是否會有所幫助。按下小綠圈開始/繼續添加回合。

Answer 1

這是一個快速修復。你可以做很多事情來改善它，但是這會讓你超越當前的障礙。

問題是你根本沒有使用你的序列。你傳遞給show_sequence的數字只是數組的長度 - 你正在遞減（這是4,3,2,1來自哪裏）。你從來沒有真正得到鍵索引你的順序排列的

function show_sequence() { 
    var k = right_seq.length; 

    //assign each button a number 
    //when the loop goes over it that button's animation plays 
    (function animation(i) { 
    if (i >= right_seq.length) { 
     return; 
    } 
    setTimeout(function() { 
     if (right_seq[i] == 1) { 
     setTimeout(function() { 
      TweenMax.from("#pink", 0.6, { 
      opacity: 0.3, 
      scale: 0.8, 
      ease: Elastic.easeOut 
      }); 
      one.play(); 
     }, 1000); 
     } else if (right_seq[i] == 2) { 
     setTimeout(function() { 
      TweenMax.from("#blue", 0.6, { 
      opacity: 0.3, 
      scale: 0.8, 
      ease: Elastic.easeOut 
      }); 
      two.play(); 
     }, 1000); 
     } else if (right_seq[i] == 3) { 
     setTimeout(function() { 
      TweenMax.from("#yellow", 0.6, { 
      opacity: 0.3, 
      scale: 0.8, 
      ease: Elastic.easeOut 
      }); 
      three.play(); 
     }, 1000); 
     } else { 
     setTimeout(function() { 
      TweenMax.from("#green", 0.6, { 
      opacity: 0.3, 
      scale: 0.8, 
      ease: Elastic.easeOut 
      }); 
      four.play(); 
     }, 1000); 
     }; //end for loop 
     animation(++i); 
    }, 200); 
    })(0); 
} 

Answer 2

而不是使用所有這些計時器，利用該方法staggerFrom，這將做延遲你的。若要從right_seq陣列系列producesd，該數組轉換爲元素名稱的列表：

function show_sequence() { 
    var k = right_seq.length; 
    var circles = right_seq.map(function (num) { 
     return ['#pink','#blue','#yellow','#green'][num-1]; 
    }); 
    // this will apply the animation in sequence 
    TweenMax.staggerFrom(circles, 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}, 0.6); 
} 

既然你都這樣了，你可能需要檢查動畫本身，因爲這種方法將設置所有受影響的元素立即到他們的初始樣式，但在「交錯」延遲執行動畫。

如果不奏效，使用onComplete財產實現你的循環：

function show_sequence() { 
    var circles = right_seq.map(function (num) { 
     return ['#pink','#blue','#yellow','#green'][num-1]; 
    }); 
    (function loop(i) { 
     if (i>=circles.length) return; 
     TweenMax.from(circles[i], 0.6, { 
      opacity:0.3, scale:0.8, ease:Elastic.easeOut, 
      onComplete: loop.bind(this,i+1) 
     }); 
    })(0); 
}