如何用按钮控制横向滚动？原功能突发失效问题排查

你的代码存在两个核心问题导致功能突然失效：

1. 共用单个定时器变量导致覆盖
   当快速切换左右按钮时，新创建的定时器会覆盖timer变量，之前的定时器没有被清除，多个定时器同时修改scrollLeft，导致滚动逻辑混乱，后续甚至无法正确清除定时器。

2. 缺失mouseleave事件处理
   如果按住按钮后鼠标移出按钮区域再松开，mouseup事件不会触发，定时器会一直运行，占用资源的同时让后续操作失效。

修复后的代码如下：

export default function initCarousel() {
  const carousel = document.querySelector("[data-carousel='scroll']");
  const rightBtn = document.querySelector("[data-carousel='right']");
  const leftBtn = document.querySelector("[data-carousel='left']");

  // 给每个按钮单独维护定时器，避免互相覆盖
  const timers = {
    left: null,
    right: null
  };

  // 封装清除定时器的通用函数
  const clearTimer = (direction) => {
    if (timers[direction]) {
      clearInterval(timers[direction]);
      timers[direction] = null;
    }
  };

  leftBtn.addEventListener("mousedown", () => {
    // 先清除可能存在的旧定时器，避免叠加
    clearTimer('left');
    timers.left = setInterval(() => {
      carousel.scrollLeft -= 50;
    }, 20);
  });

  rightBtn.addEventListener("mousedown", () => {
    clearTimer('right');
    timers.right = setInterval(() => {
      carousel.scrollLeft += 50;
    }, 20);
  });

  // 给左右按钮同时绑定mouseup和mouseleave事件
  [leftBtn, rightBtn].forEach(btn => {
    btn.addEventListener("mouseup", () => {
      clearTimer(btn.dataset.carousel);
    });
    btn.addEventListener("mouseleave", () => {
      clearTimer(btn.dataset.carousel);
    });
  });
}

关键修改说明： #

• 单独维护定时器：用timers对象分别存储左右按钮的定时器，避免切换按钮时覆盖变量导致旧定时器无法清除。
• 添加mouseleave监听：确保鼠标离开按钮区域时也能清除定时器，防止定时器失控。
• 启动前清除旧定时器：每次按下按钮时先清除对应方向的旧定时器，避免多个定时器同时运行。

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