为什么当我点击页面时 setTimeout/setInterval 变慢？

Question

我发现当您使用setInterval() 或循环setTimeout() 函数，然后在网站上移动光标时按住单击（就像您想要突出显示文本时所做的那样），由于某种原因，间隔会变慢（在 Firefox 中）。有时，当我在间隔运行时移动光标时，它甚至会变慢。

这是一个使用 setInterval 的“滚动到顶部”按钮的示例，您可以在其中看到：https://jsfiddle.net/6yzhvb07/56/

这在像上面这样的代码中似乎没什么大不了的，但是当我例如编写移动浏览器游戏，这是一个大问题，因为每次长触摸输入都会使整个游戏速度降低 50% 以上（在移动 Chrome 中）。

有没有人遇到过这个问题或者知道是什么原因造成的？

Answer 1

这是因为 javascript 运行时引擎的工作方式。 JavaScript 不支持多线程。 JavaScript 使用 EventLoop 来跟踪所有发生的事件。如果有很多事情发生，事件就会堆积起来并等待处理。

如果您想准确了解事件循环的工作原理并获取有关答案的详细信息，请观看此 youtube：

What the heck is the event loop anyway?

Answer 2

这只是使用setTimeout 和setInterval 的注意事项之一，不应该依赖它们来保证准确性。尤其如此，因为 JavaScript 单线程事件循环的阻塞特性使得无法保证在特定时间执行。如果您需要在更准确的时间发生某些事情，那么一种方法是对Date.now()（自 1970 年 1 月 1 日 UTC 以来的毫秒数）的结果进行一些数学运算，并偶尔清除并重新设置超时/间隔。

如果您将它用于游戏，那么我建议您不要使用任何一种，而是选择requestAnimationFrame。这将要求您获得帧之间的时间差异，以便在数学上解释任何变化。