如何跟踪鼠标移动何时结束

如何解决如何跟踪鼠标移动何时结束

我想在 mousemove 结束时调用一个函数。

我有一个 onmousemove 事件侦听器，如下所示，它触发了太多次：

window.onmousemove = (e) => { console.log(e) }

我想减少调用函数的频率以防止高负载。

例如，当光标停止时调用该函数一次。

如果还有其他解决方案，我也很乐意尝试。

解决方法

没有办法直接做到这一点。但是你可以试试这个：

var timeout;
element.onmousemove = function (e) {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(function() {
        // do your stuff here
    },200);
}

如果在 200 毫秒内没有检测到事件，它将触发。

,

您可以将事件回调包装在 debounce function 中。只有在开始移动鼠标后停止 1/4 秒时，才会调用此包装函数。如果您在停止后 250 毫秒内开始移动，超时将重置并等待您再次停止。

const debounce = function(func,wait,immediate) {
  let timeout;
  return function() {
    const
      context = this,args = arguments,later = function() {
        timeout = null;
        if (!immediate) func.apply(context,args);
      },callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later,wait);
    if (callNow) func.apply(context,args);
  };
};

const onMouseMove = (e) => {
  console.log(`Stopped position: (${e.clientX},${e.clientY})`);
};

const debounceMouseMove = debounce(onMouseMove,250); // 1/4 of a second

document.addEventListener('mousemove',debounceMouseMove);