使用外推来解决mousemove事件延迟

时间:2012-10-08 13:08:08

标签: javascript dom mousemove dom-events

在对此网站进行一些搜索后,我了解到我无法控制浏览器的mousemove事件频率。

所以我想应用某种外推方法来解决滞后mousemove事件问题。

我在触发mousemove事件时记录每个鼠标位置,并计算加速度(利用有限差分来获得速度,然后加速)。

render()函数之后,我测量从上次render()函数调用开始经过的增量时间。 最后,我用加速度和dt推断出位置。

但是我没有看到使用这种方法有任何重大影响。有什么不对吗?

编辑:我在这里做了一个小例子。 (对不明确的问题陈述感到抱歉)

https://gist.github.com/3858124

2 个答案:

答案 0 :(得分:1)

在我将代码粘贴到要点后,我意识到问题然后修复了错误。

问题是:

我使用NDC坐标来计算导数,而我使用世界空间坐标来进行外推。

这是新代码:

https://gist.github.com/3858277

结论: 对滞后mouseevent有一些影响,但不是很多。而作为(坏)副作用,当你的鼠标移动紧急制动时会有过度拍摄。

我仍在寻求更好的解决方案。任何意见/建议都是受欢迎的。 谢谢。

答案 1 :(得分:0)

我不确定你会用推断做得更好。所有当前浏览器都为javascript维护一个线程,可以是每个标签(Chrome)或每个浏览器窗口(Firefox)。因此,如果您在脚本中工作,当您的脚本运行时,浏览器将根本不会触发任何鼠标移动事件*。

因此,提高鼠标移动更新频率的最佳方法是优化您的其他JavaScript以避开鼠标移动事件的方式。一种方法是使用更多异步调用。因此,您可以编写代码以通过循环的下一步调用setTimeout(nextFunc, 0),该循环将控制从脚本传回,并允许在循环的下一步之前触发事件。

*单线程和同步计算规则的例外是WebWorkers,它允许您与执行的其余部分并行执行某些操作,主要是那些不涉及DOM的事物。