如何为JavaScript wheel事件设置延迟实现滑块滚动切换控制

可以通过状态锁+定时器的方式在wheel事件中实现延迟效果，避免短时间内重复触发幻灯片切换。核心思路是用一个变量标记当前是否处于"锁定"状态，触发切换后锁定一段时间，期间忽略新的滚动事件，延迟结束后恢复响应。

实现代码 #

let sTop = document.querySelector(".maze");
let isScrolling = false; // 锁定状态标记
const SCROLL_DELAY = 1000; // 延迟时长（毫秒），可按需调整

sTop.addEventListener('wheel', (e) => {
  e.stopPropagation();
  // 处于锁定状态时，直接忽略本次滚动事件
  if (isScrolling) return;

  const delta = e.deltaY;
  if (delta === -100) {
    leftSl();
  } else if (delta === 100) {
    nextSl();
  }

  // 触发切换后锁定状态
  isScrolling = true;
  // 延迟指定时间后解锁
  setTimeout(() => {
    isScrolling = false;
  }, SCROLL_DELAY);
});

关键说明 #

• 状态锁isScrolling：用来过滤短时间内的重复滚动事件，防止连续滚动导致幻灯片快速切换
• 延迟时长SCROLL_DELAY：控制两次可触发切换的最小间隔，比如设置为1000ms意味着1秒内只能触发一次切换
• 适配异步切换：如果leftSl()或nextSl()包含动画等异步操作，建议把解锁逻辑放在动画完成的回调中，比如：

  // 假设leftSl支持回调参数
  leftSl(() => {
    setTimeout(() => {
      isScrolling = false;
    }, SCROLL_DELAY);
  });
  

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