Javascript 减少鼠标移动事件

我有以下代码：

 $("body").mousemove(function (event)
            {                
                var lowestspanelm = findNearestSpan(gg_phone_spans,event);
            });

在鼠标移动过程中，这会产生太多事件，并增加CPU负载，这大约需要1分钟左右才能恢复正常

为了减少这个负载，我想要的是只在鼠标停止至少1/2秒时才执行操作

---

怎么做？

一种可能的方法是使用超时：

var mouseTimeout;

$("body").mousemove(function (event) {                
  clearTimeout(mouseTimeout);
  mouseTimeout = setTimeout(function() {
    var lowestspanelm = findNearestSpan(gg_phone_spans,event);

  }, 500);
});

---

您可以调整500，使其或多或少地触发。

如注释所述，这通常称为

去盎司功能，在许多通用库中都可以使用。自己编写（一个简单的版本）也相当容易


$（文档）。在（“mousemove”）上，取消盎司（函数（事件）{
log（“这只会在停止移动鼠标1/2秒后发生”）
},500));
函数去抖动（fn，时间）{
设定时器为空；
返回（evt）=>{
清除超时（计时器）；
定时器=设置超时（（）=>fn（evt），时间）；
};
}
尽管你的问题指向了一个你需要去盎司功能的方向，但我的建议是，你还是试试节流功能

取消公告功能仅在没有更多传入事件时启动
限制功能只会每隔一段时间触发一次

$("body").mousemove(throttle(function (event) {                
    var lowestspanelm = findNearestSpan(gg_phone_spans,event);
}), 500);

只要有传入事件，该命令将仅每隔0.5秒触发一次

您不需要jQuery来完成此任务

document.addEventListener('mousemove', throttle(function (event) {
    var lowestspanelm = findNearestSpan(gg_phone_spans,event);
}, 500));

这里是差异的一个演示。
如果将鼠标悬停在正常元素上，则背景颜色将随着每个像素的移动而改变。

如果您在油门元件内移动，则只要您移动，颜色只会每半秒改变一次。

如果在去盎司元素内移动，则颜色仅会在停止移动（或移出元素）后0.5秒发生变化

这里是去盎司和油门紧挨着


函数去盎司（回调，等待）{
var超时；
返回函数（e）{
clearTimeout（超时）；
超时=设置超时（（）=>{
撤回（e）；
}，等等）；
}
}
功能调节（回调，等待）{
变量超时
返回函数（e）{
如果（超时）返回；
超时=设置超时（（）=>（回调（e），超时=未定义），等待）
}
}
函数onMove（e）{
e、 target.classList.toggle（'gold'）
}
document.querySelector（'.normal'）.addEventListener（'mousemove'，onMove）
document.querySelector（'.throttle'）。addEventListener（'mousemove'，throttle（onMove，500））
document.querySelector（'.debounce'）。addEventListener（'mousemove'，debounce（onMove，500））
。正常，
掐死
黛博斯先生{
宽度：100px；
高度：100px；
利润率：25px；
背景：银；
边框：1件纯金；
}
.普通黄金，
.黄金，
.debounce.gold{
背景：金；
}
身体{
显示器：flex；
}
正常
掐死
DEBOUNCE
您可以使用
DEBOUNCE
函数，例如lodash的debounceFind throttle或DEBOUNCE函数，以减少调用次数。请参阅，对于没有任何框架的DEBOUNCE函数，使用该解决方案，
findNearestSpan
直到鼠标停止才被调用！没关系，我理解错了。@SteeveDroz不正是被问到“要减少这个负载，我想要的是只在鼠标停止至少1/2秒时才行动”最后一次函数调用将在鼠标停止移动500毫秒后发生。这和你问的差不多。再说一次：没关系，我把问题理解错了。很好地展示了不同之处。