技术求助：如何实现每2秒仅打印鼠标最后一次移动坐标？

你的代码逻辑存在两个核心问题：

• 每次鼠标移动都会重复创建新的setTimeout，没有清除旧定时器，导致多个定时器堆积；
• mouseMove函数里只是给onMouseMove赋值，但这个函数并未被正确绑定到事件监听逻辑中，反而原有的mousemove事件回调一直在触发，才会出现onMouseMove随鼠标移动执行的异常情况。

要实现鼠标停止移动2秒后仅打印最后一次坐标的需求，正确的实现方式如下：

// 存储最后一次鼠标移动的坐标
let lastMousePosition = null;
// 存储定时器ID，用于清除未触发的定时器
let timerId = null;

window.addEventListener('mousemove', (e) => {
    // 更新最后一次鼠标坐标
    lastMousePosition = { x: e.x, y: e.y };
    
    // 清除上一次未触发的定时器，避免重复执行
    if (timerId) {
        clearTimeout(timerId);
    }
    
    // 重新设置2秒定时器，鼠标停止移动满2秒后触发
    timerId = setTimeout(() => {
        console.log('mouse location:', lastMousePosition.x, lastMousePosition.y);
    }, 2000);
});

逻辑说明 #

1. 每次鼠标移动时，先记录当前的坐标到lastMousePosition；
2. 立即清除之前设置的定时器——如果鼠标在2秒内继续移动，之前的定时器就不会再触发；
3. 重新创建一个新的2秒定时器，只有当鼠标完全停止移动满2秒时，这个定时器才会执行，打印最后一次记录的坐标。

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