如何追踪mousemove事件结束时机，优化高频回调的页面性能负载

用原生的事件防抖逻辑就能完全匹配你的需求，既消除mousemove高频触发带来的资源占用，又能实现鼠标停止移动后仅执行一次目标回调的效果。

核心防抖实现 #

防抖的运行逻辑很简单：每次mousemove触发时都重置计时，只有连续超过指定时长没有新的mousemove事件触发，才真正执行目标回调。
你只需要在原有事件绑定逻辑外层套一层防抖封装即可，完整可直接运行的代码如下：

// 防抖工具函数：接收需要执行的回调、停止触发后的等待时长（单位ms）
function debounce(callback, wait = 300) {
  let timeoutId = null;
  return function(event) {
    // 每次新的mousemove触发，清除上一次的待执行定时器
    clearTimeout(timeoutId);
    // 重新计时，等待指定时长无新事件触发后执行回调
    timeoutId = setTimeout(() => {
      callback.apply(this, [event]);
    }, wait);
  }
}

// 替换原有onmousemove绑定逻辑
window.onmousemove = debounce((e) => {
  // 此处替换为你需要在鼠标停止移动后执行的业务逻辑，比如原有的console.log(e)
  console.log('鼠标停止移动，执行回调', e);
}, 300);

这个实现的实际运行效果：鼠标持续移动时，不管mousemove被触发多少次，回调逻辑都不会执行；只要鼠标停下超过300ms，就会自动执行一次回调，从根源上降低高频事件带来的资源开销。

其他适配不同场景的可选优化方案 #

如果你的业务场景除了停止时执行，还有其他频率控制需求，可以根据实际情况选择以下方案：

• 节流方案：适合需要在鼠标持续移动过程中，按固定间隔执行回调（而非完全等停下才执行）的场景，比如拖拽元素、画笔绘制等需要低延迟实时反馈的需求。核心逻辑是限制回调的最小执行间隔，保证不管事件触发多频繁，回调最多每固定间隔执行一次。
  简单实现示例：

  function throttle(callback, interval = 200) {
    let lastRunTime = 0;
    return function(event) {
      const currentTime = Date.now();
      if (currentTime - lastRunTime >= interval) {
        lastRunTime = currentTime;
        callback.apply(this, [event]);
      }
    }
  }
  window.onmousemove = throttle((e) => { /* 移动过程中按200ms间隔执行的逻辑 */ }, 200)
  

• requestAnimationFrame 绑定方案：如果回调逻辑涉及DOM操作、页面重绘，用定时器实现的频率控制可能和浏览器渲染周期不同步，造成额外的性能损耗。可以把回调执行绑定到浏览器的逐帧渲染流程上，保证每帧最多执行一次回调，既不会超出浏览器的渲染能力，也能拿到最优的渲染流畅度。
  简单实现示例：

  let pendingRafId = null;
  window.onmousemove = (e) => {
    // 已经有等待执行的渲染帧时，直接跳过新事件的回调注册
    if (pendingRafId) return;
    pendingRafId = requestAnimationFrame(() => {
      // 你的业务逻辑
      console.log(e);
      pendingRafId = null;
    })
  }
  

小提示：防抖的等待时长建议设置在200-400ms区间，过短会失去防抖的资源优化效果，过长会让用户感知到明显的操作延迟。

内容的提问来源于stack exchange，提问作者Systems Rebooter