首页 文章

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

提问于
浏览 次
0

我试图在序列中添加另一个步骤之前重复记忆游戏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);
}
javascript settimeout wait

1 回答

  • 0

    你是对的，所有的功能都在相同的时间间隔排队 . 你可以通过将间隔乘以迭代次数来解决这个问题，例如：

    setTimeout(increasePattern, 1000 * i);

    但是这将排列一系列函数以按顺序运行 . 相反，考虑让函数以所选的间隔调用自身，直到满足某些条件，例如，

    // 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);

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

    回复于

相关问题