使用setTimeout进行while循环会导致无限循环 [英] do while loop with setTimeout causing infinite loop

问题描述

我正在开发simon游戏（一种遵循颜色模式的游戏）。它通过计算机第一轮和我的第一轮，但是尝试在每个计算机选择之间执行setTimeout会导致使用do while语句导致无限循环，或者如果我使用for循环，则同时播放两个选择。 highlightDiv函数仅在div上执行toggleClass，然后执行setTimeout将类切换回关闭状态。 audioStart函数使用switch语句确定要播放的声音，然后使用setTimeout半秒钟播放该声音。我认为增量上的setTimeout将为增量前留有足够的时间使这两件事发生，然后在computerChoice数组中进行下一个索引。如果这样更容易，可以使用Codepen： http://codepen.io/RawleJuglal/pen/pgRVKd

I'm working on a simon game(the one you follow the color pattern). It makes it through the computers 1st turn and my 1st turn but trying to do a setTimeout between each computer choice is causing an infinite loop with the do while statement or playing both choices at the same time if I use for loop. The highlightDiv function just does a toggleClass on the div, then a setTimeout to toggle the class back off. And the audioStart function uses a switch statement to determine which sound to play and then a setTimeout of half a second to play that sound. I thought this setTimeout on the increment would allow enough time for those two things to happen before it incremented and then did the next index in the computerChoice array. This is the codepen if that is easier: 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);

推荐答案

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

Javascript is single threaded, and the concept of timeouts means that you place a function on a special queue, which is to execute your callbacks when their time is due. now, since in your code, the i variable is being updated only in the timeout function, which is only after 3 seconds, it means that the body of the loop will run again and again until 3 seconds are met.

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

in 3 seconds, javascript can run thousands of iterations, and each iteration registers another timeout, which means that your event queue is blasted and your single thread will have hard time completing all those tasks until i is finally reaching cPattern.length, if ever.

您的解决方案可能正在使用某种 setInterval 具有执行所需操作的回调，并停止在每次递增的迭代变量上，就像这样：

your solution might be using some sort of setInterval which has a callback that does what you want, and stops on some iteration variable that increments every time, let's say like this:

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

},
2000);

这篇关于使用setTimeout进行while循环会导致无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！