如何使用JavaScript追踪鼠标移动并实时触发更新目标函数

实现该需求核心是使用JavaScript的mousemove事件监听接口，你可以直接参考如下改造后的完整代码：

// 原有生成随机8位ID的逻辑
function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  for (var i = 0; i < 8; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  return text;
}

// 鼠标移动时触发的自定义执行函数
function onMouseMove(e) {
  // 从事件对象中获取鼠标当前坐标
  const positionX = e.clientX;
  const positionY = e.clientY;
  
  // 此处写入你需要执行的业务逻辑，示例为打印鼠标位置+生成新随机ID
  const randomId = makeid();
  console.log(`当前鼠标坐标：X=${positionX}，Y=${positionY}，生成ID：${randomId}`);
  
  // 如果需要同步更新页面展示，直接操作对应DOM即可，示例：
  // document.querySelector('#mouse-tip').innerText = `鼠标位置：${positionX}, ${positionY}`
}

// 给全局document绑定鼠标移动监听，只要鼠标移动就会触发onMouseMove函数
document.addEventListener('mousemove', onMouseMove);

// 后续如果需要取消监听，执行以下代码即可，避免内存泄漏
// document.removeEventListener('mousemove', onMouseMove);

如果你觉得鼠标移动触发频率太高影响性能，可以额外添加防抖逻辑限制触发频率：

// 防抖工具函数，delay参数为最小触发间隔，单位毫秒
function debounce(func, delay = 150) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// 绑定监听时用防抖包裹即可，示例为鼠标停止移动150ms后才触发一次逻辑
document.addEventListener('mousemove', debounce(onMouseMove));

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