如何实现鼠标滚轮单次滚动仅触发一次轮播carousel slide切换

解决方案 #

核心思路是用状态锁屏蔽单次滚动过程中重复触发的wheel事件，替代你之前用的防抖逻辑，因为普通防抖默认是延迟执行，不符合你触发一次就立刻切换的需求。

实现步骤 #

1. 定义一个状态标记位，记录当前轮播是否正在切换中
2. 每次wheel事件触发时，先判断状态位，如果正在切换就直接跳过处理
3. 确认可以切换时先锁定状态，调用切换函数，等切换动画完成后再解除锁定

代码示例 #

// 状态锁，默认未锁定
let isSwitching = false;
// 和你的轮播切换动画时长保持一致即可，单位ms
const ANIMATION_DURATION = 350;

el.addEventListener('wheel', (event) => {
  event.preventDefault();
  // 切换中直接忽略本次事件
  if (isSwitching) return;

  // 锁定状态
  isSwitching = true;
  // 执行切换
  nextSlide();

  // 动画结束后解锁
  setTimeout(() => {
    isSwitching = false;
  }, ANIMATION_DURATION);
});

如果你的nextSlide函数支持传入切换完成的回调，可以把解锁逻辑放到回调里，时机更准确：

el.addEventListener('wheel', (event) => {
  event.preventDefault();
  if (isSwitching) return;

  isSwitching = true;
  nextSlide(() => {
    isSwitching = false;
  });
});

补充说明 #

如果需要支持向上滚动切换上一页，只需要在判断状态锁之前加上你原来的滚动方向判断逻辑即可，向上滚动调用prevSlide的逻辑同样适用该状态锁规则。

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