javascript - 如何在运行长 javascript 代码时处理用户输入事件？

Question

我有一段长时间运行的 javascript 代码，用于处理某种渲染 (webgl)。 这是某种“自适应渲染”，其中我随着时间的推移越来越精确地计算表面(意味着场景的“分辨率”变得越来越精确)。

我希望它在用户不按键或移动鼠标时一直运行。 如前所述 here ，我可以使用 setTimeout 或 setInterval，给 javascript 一些时间来处理其他事件。

我已经在这个 jsFiddle 上测试了 setTimeout 和 setInterval 延迟，我观察到以下结果:

setTimeout delay: 15-20 ms
setInterval delay: 2-4 ms

速度很快，但在我的情况下仍然很难使用。我需要能够在 16 毫秒 内使用react、完成一些计算和渲染，以给用户以 60 fps 运行的印象。

所以这是问题:

1) 是否有其他(更聪明的)方法来检查是否有一些传入的用户输入事件需要处理？

2) 是否还有其他方法可以让一些“长时间运行的代码可被用户中断”？ (也许是网络 worker ？)

Answer 1

您必须将代码分成小块，并在计时器滴答时运行每个 block 。在每个计时器滴答之间，可以处理用户事件，如果您希望停止执行长时间运行的计时器驱动进程，您可以设置一个标志。

没有其他方法可以处理事件或检查未决事件。您必须退回到主事件循环，这意味着您的 javascript 执行线程需要完成。而且，在返回事件循环后执行更多代码的唯一方法是响应事件或使用计时器。这就是编写和构建 JavaScript 的方式。

您唯一的选择是使用网络 worker ，但它们不能接触 DOM，不能在旧浏览器中工作，并且只能通过消息传递与主事件循环通信。适合做计算，但不适合做动画。