Swiper（Swiper Element）：如何防止滑动触发重复事件

核心思路是通过状态锁控制事件触发时机，确保只有上一次过渡完全结束后，才允许下一次slideNextTransitionStart事件执行逻辑：

• 定义一个布尔变量作为状态锁，标记当前是否处于过渡动画中
• 在slideNextTransitionStart回调里先判断锁的状态，若正处于过渡则直接返回，否则锁定并执行业务逻辑
• 在slideNextTransitionEnd回调里解除锁定，允许下一次触发

具体代码示例：

// 初始化过渡状态锁
let isTransitioning = false;

// 获取Swiper Element实例
const swiperElement = document.querySelector('swiper-container');
const swiper = swiperElement.swiper;

// 监听slideNextTransitionStart事件
swiper.on('slideNextTransitionStart', () => {
  // 若正在过渡，直接终止本次回调
  if (isTransitioning) return;
  
  // 标记为正在过渡
  isTransitioning = true;
  
  // 这里写入你的业务逻辑
  console.log('执行slideNextTransitionStart逻辑');
});

// 监听slideNextTransitionEnd事件
swiper.on('slideNextTransitionEnd', () => {
  // 过渡结束，解锁状态
  isTransitioning = false;
  
  // 这里写入过渡结束后的逻辑
  console.log('执行slideNextTransitionEnd逻辑');
});

如果需要更严格控制滑动行为，也可以在过渡期间临时禁用触摸滑动：

swiper.on('slideNextTransitionStart', () => {
  if (isTransitioning) return;
  isTransitioning = true;
  // 禁用触摸滑动
  swiper.allowTouchMove = false;
  // 业务逻辑...
});

swiper.on('slideNextTransitionEnd', () => {
  isTransitioning = false;
  // 恢复触摸滑动
  swiper.allowTouchMove = true;
  // 后续逻辑...
});

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