JS交互时如何取消mouseleave绑定的旧setTimeout延迟任务

核心思路是把setTimeout返回的定时器ID存在公共作用域的变量中，每次触发mouseenter时清除还未执行的归位定时器即可，是原生JS最直接的实现方案，不需要额外引入依赖。

具体实现步骤 #

• 先在全局/外层作用域声明变量存储定时器ID，也可以提前缓存元素初始位置，避免每次归位重复计算

// 存储归位定时器ID
let goBackTimer = null;
const catchMe = document.getElementById("catchMe");
// 缓存初始位置
const initTop = catchMe.offsetTop + 'px';
const initLeft = catchMe.offsetLeft + 'px';

• 修改mouseenter对应的move函数，开头加入清除旧定时器的逻辑

function move() {
  // 核心：如果有未执行的归位定时器，直接清除
  if (goBackTimer) {
    clearTimeout(goBackTimer);
    goBackTimer = null;
  }
  // 原有随机移动的逻辑，示例加了避免元素移出视口的边界处理
  const randomTop = Math.random() * (window.innerHeight - catchMe.offsetHeight) + 'px';
  const randomLeft = Math.random() * (window.innerWidth - catchMe.offsetWidth) + 'px';
  catchMe.style.top = randomTop;
  catchMe.style.left = randomLeft;
}

• 修改mouseleave对应的startPosition函数，把setTimeout返回值赋值给存储ID的变量

function startPosition() {
  // 延迟2秒归位，时间可以按需调整
  goBackTimer = setTimeout(() => {
    catchMe.style.top = initTop;
    catchMe.style.left = initLeft;
    // 执行完重置定时器变量，避免无效内存占用
    goBackTimer = null;
  }, 2000);
}

• 原有事件绑定逻辑不需要改动

catchMe.addEventListener('mouseenter', move);
catchMe.addEventListener('mouseleave', startPosition);

可选优化 #

如果担心全局变量污染，可以把所有代码包裹在立即执行函数（IIFE）中，变量仅在闭包内生效，不会对外层作用域产生影响。

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