setTimeout 阻塞问题

Question

我正在 javascript 中写一个 "Game of Life"。我在一个名为 doGeneration() 的函数中完成了所有逻辑。我可以从控制台重复调用它，一切都按计划进行，但是，如果我把它放在 while 循环中，执行会阻塞 UI 并且我只能看到最终结果（最终）。

while (existence) {
    doGeneration();
}

如果我添加 setTimeout()，即使生成限制为 15，浏览器实际上也会崩溃（Canary，Chrome）。

while (existence) {
    setTimeout(function() {
        doGeneration();
    },100);
}

如何在不阻塞 DOM/UI 的情况下每秒调用一次 doGeneration()？

Answer 1

你想要设置间隔

 var intervalId = setInterval(function() {
     doGeneration();
 }, 1000);

 // call this to stop it
 clearInterval(intervalId);

Answer 2

而不是使用 setINterval 或 setTimeout 并假设一些运行dom 时间间隔足以让 UI 更新您 shoul/could 使 doGeneration 足够智能，可以在更新 dom 并且满足 existence 的条件后调用自身。

Answer 3

我会使用 requestAnimationFrame(doGeneration)。这个函数的想法是让浏览器决定在什么时间间隔执行游戏逻辑或动画。这带来了潜在的好处。

setTimeout blocking issue