Question

我试图在序列中添加另一个步骤之前重复内存游戏simon中的模式，但我认为循环正在如此快速地迭代，以便序列中的每个数字基本上都调用setTimeout（function，1000）同时然后他们同时进行而不是一个接一个地进行。无论如何要解决这个问题吗？

function playPattern(){
    var i;
    for(i=0; i<pattern.length; i++){
        var currentNum = pattern[i];
        if(currentNum === 0){
            var greenNoise = new Audio("greenNoise.mp3");
            greenNoise.play();
            ctx.fillStyle = "#71FF4A";
            ctx.fillRect(10, 30, w/2-10, h/3);
            setTimeout(drawGameBoard, 1000);
        } else if (currentNum === 1){
            var redNoise = new Audio("redNoise.mp3");
            redNoise.play();
            ctx.fillStyle = "#F73B3E";
            ctx.fillRect(w/2, 30, w/2-10, h/3);
            setTimeout(drawGameBoard, 1000);    
        } else if (currentNum === 2){
            var yellowNoise = new Audio("yellowNoise.mp3");
            yellowNoise.play();
            ctx.fillStyle = "#FFF269";
            ctx.fillRect(10, h/3+30, w/2-10, h/3);          
            setTimeout(drawGameBoard, 1000);
        } else { //currentNum === 3
            var blueNoise = new Audio("blueNoise.mp3");
            blueNoise.play();
            ctx.fillStyle = "#58ACF5";
            ctx.fillRect(w/2, h/3+30, w/2-10, h/3);         
            setTimeout(drawGameBoard, 1000);
        }
    }
    setTimeout(increasePattern, 1000);
}

Answer 1

您正确无误，所有功能都在相同的时间间隔排队。您可以通过将间隔乘以迭代计数来修复此问题，例如

setTimeout(increasePattern, 1000 * i);

但是这将排队一系列函数以按顺序运行。相反，请考虑让函数在选定的时间间隔内调用，直到满足某些条件，例如

＆＃13;

// This function does all the setup
function doStuff(num) {

  // Keep limit in a closure
  var limit = num;

  // This function does the work
  function realStuff() {

    // While limit is greater than zero, do stuff...
    if (limit) {

      // Decrement limit
      --limit;
      
      // Trivial thing to do
      console.log(limit);

      // Call itself again
      setTimeout(realStuff, 1000);
    }
  }

  // Initiate the first time
  realStuff();
}

doStuff(10);

＆＃13;

您还可以调整每次通话的超时时间，以确定您是否希望它迟早尝试在较长时间内以较高的准确度达到常规时间间隔。您可以通过不调用下一个 setTimeout 来取消序列，或者通过在函数外部使用间隔标识符来取消序列，以便通过调用 clearTimeout 来取消它。 / p>

在进入下一个循环迭代之前执行setTImeout操作

1 个答案: