以延迟

Question

这是一个jquery / javascript问题。 所以我有一个包含按钮编号的数组，并将这些按钮输出到按钮上，这将导致按钮被点击。问题是如果我运行循环，所有按钮都会立即被点击。相反，我希望它能够延迟输出数字，以便在1秒延迟后按下按钮。

以下是Simon游戏项目的链接： https://codepen.io/roger1891/full/vmYqwx/

按照第一个按钮后可以看到问题。之后，计算机将同时按下接下来的两个按钮，而不是在延迟1秒后单独按下它们。

问题位于此循环中，该循环位于myloop（）函数中：

sequenceArray.forEach(function(item, index, array){
  //click button by getting the last index of the array
  //$("#btn-"+array[array.length-1]).click();
  $("#btn-"+array[index]).click(); 

  console.log(array);
}); 

这是完整的代码：

 //associating buttons to sound
  var soundButton = function(buttonId, soundId) {
    $("#" + buttonId).click(function(){
    $("#" + soundId).get(0).play();  
    $("#" + buttonId).css("opacity", "0.5");
    setTimeout( function(){
      $("#" + buttonId).css("opacity", "1");
    },500);
    if(currentPlayerTurn == "human") {
       var $input = $(this);
       var attrString = $input.attr("id");
       //only get number from id attribute
       var strNum = attrString.replace( /^\D+/g, '');
       //convert theNumber from string to number
       var theNum = parseInt(strNum);
       playerArray.push(theNum);
       console.log(theNum);
       console.log(playerArray);
    }
  });  
  };

  function myLoop() { 
    setInterval( function(){
      if(gameWon == false && onGoingGame == true && currentPlayerTurn == "computer" && score < 5) {

        //increment score  
        score++;  
        //append to score id
        $("#score").empty().append(score);
       //create random number
        randomNumber = Math.floor((Math.random()*4) + 1);
        //push random number into array
        sequenceArray.push(randomNumber);
        //loop through array

        sequenceArray.forEach(function(item, index, array){
        //click button by getting the last index of the array
        //$("#btn-"+array[array.length-1]).click();
        $("#btn-"+array[index]).click(); 

        console.log(array);
        });  

        currentRound = sequenceArray.length;
        onGoingGame = false;
        currentPlayerTurn = "human";
      }  

      if(currentPlayerTurn == "human") {
        var is_same = playerArray.length == sequenceArray.length && playerArray.every(function(element, index) {
          return element === sequenceArray[index]; 
        });
        is_same;
        console.log(is_same);
        if(is_same == true) {
          playerArray = [];
          onGoingGame = true;
          currentPlayerTurn = "computer";
        }
      }  
    },1000);

  }

 myLoop(); 

提前感谢您的帮助。

Answer 1

由于你想逐个触发按钮，你的Java应该在循环中。请注意索引，因为这是异步的。

setTimeout()

编辑：将固定的1000ms延迟替换为延迟*索引

Answer 2

在forEach循环中需要console.log(item)而不是完整数组