javascript - 使用 setTimeout 执行 while 循环会导致无限循环

Question

我正在开发一款西蒙游戏(您遵循颜色模式的游戏)。它使其通过计算机的第一轮和我的第一轮，但尝试在每个计算机选择之间执行 setTimeout 会导致 do while 语句的无限循环，或者如果我使用 for 循环，则同时播放两个选择。 highlightDiv 函数只是在 div 上执行toggleClass，然后使用 setTimeout 来关闭该类。 audioStart 函数使用 switch 语句来确定要播放哪个声音，然后使用半秒的 setTimeout 来播放该声音。我认为增量上的 setTimeout 将允许有足够的时间在增量之前发生这两件事，然后执行 ComputerChoice 数组中的下一个索引。如果更容易的话，这是代码笔:http://codepen.io/RawleJuglal/pen/pgRVKd

var computerChoice = ["red", "yellow"],index=0;

function computerPattern(cPattern, index){
 console.log("Entered computer pattern function");
 console.log("This is cPattern");
 console.log(cPattern);
 console.log("This is index: "+ index);
 if(index !== cPattern.length)
   {
     highlightDiv(cPattern[index]);
     audioStart(cPattern[index]);
     index++;
     computerPattern(cPattern, index);
   }
 else
   {
     index=0;
   }
 console.log("Leaving computerPattern function");
}

computerPattern(computerChoice, index);

Answer 1

Javascript 是单线程的，超时的概念意味着您将一个函数放在一个特殊的队列上，该队列在时间到期时执行您的回调。现在，由于在您的代码中，i 变量仅在超时函数中更新，仅在 3 秒后更新，这意味着循环体将一次又一次地运行，直到满足 3 秒为止。

在 3 秒内，javascript 可以运行数千次迭代，并且每次迭代都会注册另一个超时，这意味着您的事件队列将被破坏，并且您的单个线程将很难完成所有这些任务，直到我最终达到 cPattern .length，如果有的话。

您的解决方案可能使用某种setInterval，它有一个回调函数可以执行您想要的操作，并在每次递增的某个迭代变量上停止，让我们这样说:

var interval = setInterval(function(){
     console.log(cPattern[i]);
     highlightDiv(cPattern[i]);
     audioStart(cPattern[i]);
     i++;
     if(i >= cPattern.length){
        clearInterval(interval);
     } 

},
2000);