JS如何在一个事件监听器触发后移除其他监听器及对应逻辑

setInterval创建的定时任务会持续运行直到被手动销毁，销毁时必须传入任务创建时返回的唯一ID调用clearInterval()。现有代码没有保存这个定时器ID，也未绑定鼠标移出的处理逻辑，无法触发停止操作；同时每次触发mouseenter都会新建一个定时器，多次进出元素会出现多定时器并行、切图速率异常的问题。

• 在两个事件回调都能访问到的外层作用域，声明两个共享变量：一个存储定时器ID，一个存储初始默认图片的地址
• 给目标div绑定mouseleave事件，触发时先清除正在运行的切图定时器，再把图片重置为默认图
• 优化mouseenter的切图逻辑：每次启动新定时器前，先清除可能残留的旧定时器，避免多定时器并行导致的逻辑混乱

// 外层作用域声明共享变量
let imageSwitchTimer = null;
const defaultImageUrl = img.src; // 初始化时缓存默认展示图地址

// 鼠标悬停切图逻辑
div.addEventListener("mouseenter", startImageSwitch);
function startImageSwitch() {
  let index = 0;
  // 启动新定时器前先清理残留旧定时器
  if (imageSwitchTimer) clearInterval(imageSwitchTimer);
  imageSwitchTimer = setInterval(() => {
    img.src = imageArr[index];
    index = index >= imageArr.length - 1 ? 0 : index + 1;
  }, 2000);
}

// 鼠标移出重置逻辑
div.addEventListener("mouseleave", stopImageSwitch);
function stopImageSwitch() {
  // 终止定时切图任务
  if (imageSwitchTimer) {
    clearInterval(imageSwitchTimer);
    imageSwitchTimer = null;
  }
  // 恢复默认展示图
  img.src = defaultImageUrl;
}

• 定时器ID不要定义在startImageSwitch（原changeImage）函数内部，否则鼠标移出的回调无法访问到该ID，无法执行清除操作
• 不要硬编码默认图片地址，初始化时直接缓存img标签当前的src即可，后续修改默认图时无需同步修改两处代码
• 如果需要首次悬停时立刻切换第一张图，而不是等2秒才触发第一次切换，可以在setInterval外先执行一次img.src = imageArr[0]的赋值逻辑

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