jQuery mousemove 使用 three.js 减慢 WebGL答案

【问题标题】：jQuery mousemove slows down WebGL with three.jsjQuery mousemove 使用 three.js 减慢 WebGL
【发布时间】：2014-01-02 21:59:03
【问题描述】：

如果我在我的 WebGL 容器上放置一个 mousemove 处理程序，则在移动鼠标时帧速率会急剧下降。仅当我使用 jQuery mousemove 函数时才会发生这种情况，如果我改为使用普通的 addEventListener 则不会发生丢弃。为了让 jQuery 不会发生这种情况，我需要做些什么具体的事情吗？或者这是 jquery 中的一个已知缺陷？

快速代码：

document.getElementById('wct').addEventListener( "mousemove", function(e) {
    var x = e.pageX - this.offsetLeft
    var y = e.pageY - this.offsetTop
    sc_outer.light.position.x = x
    sc_outer.light.position.y = y
})

慢代码：

$('#wct').mousemove( function(e) {
    var x = e.pageX - this.offsetLeft
    var y = e.pageY - this.offsetTop
    sc_outer.light.position.x = x
    sc_outer.light.position.y = y
})

【问题讨论】：

标签： jquery three.js webgl

【解决方案1】：

由于频繁调用 jquery 以查找特定 DOM 元素（在您的情况下为 #wct）并检查鼠标移动到那里，会发生减速。

事件侦听器的工作方式不同，专门用于捕获事件。

【讨论】：

我不经常打电话。我进行查找只是为了注册回调。回调代码本身是一样的。