为什么单击页面时setTimeout / setInterval变慢？

Question

我发现，当您使用$this->load->helper('url'); 或循环使用setInterval()函数并在网站上移动光标时按住click（就像您要突出显示文本一样）时，间隔会变慢由于某种原因（在Firefox中）关闭。有时当间隔运行时我刚刚移动光标时，速度甚至会变慢。

下面是使用setTimeout()的“滚动到顶部”按钮的示例，在其中您可以看到：https://jsfiddle.net/6yzhvb07/56/

在上述代码中，这似乎没什么大不了的，但是当我对移动浏览器游戏进行编码，这是一个大问题，因为每次长时间触摸输入都会使整个游戏的运行速度降低50％以上（在Mobile Chrome中）。

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

Answer 1

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

如果您想彻底了解事件循环的工作原理并获得答案的详细信息，请观看此youtube：

What the heck is the event loop anyway?

Answer 2

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

如果您将它用于游戏，那么我建议不要使用其中任何一种，而应选择requestAnimationFrame。这将要求您获取帧之间的时间差，以数学方式考虑所有更改。