前端轮播图偶尔乱跳/跳过一张？一个定时器竞态 Bug 排查记

背景

站点首页的图片轮播，原本逻辑简单：鼠标移出自动切换，移入暂停。最近收到反馈——轮播切换变得「不规则」，有时乱跳、偶尔会跳过某一张，看起来像是速度忽快忽慢，但改了间隔时间也压不住。

直觉上以为是「速度没调好」，真正定位后发现根本不是速度问题，而是一个定时器叠放的竞态缺陷。

轮播定时器竞态问题与修复示意

过程

问题描述

轮播有 4 张：A → B → C → D 循环。实际表现：

切换节奏不规则，时而正常、时而在同一张上停留过久
偶尔直接跳过某一张（比如从 A 直接到 C）
鼠标在轮播边缘快速划过时尤其明显

排查

第一反应：改速度

先尝试把切换间隔 5 秒改成 3 秒、8 秒，均无济于事——问题不是快慢，而是触发时机错乱。方向错了。

第二反应：审查定时器逻辑

回看轮播脚本的核心，常用的「鼠标移入暂停」写法大致是这样：

hero.onmouseenter = () => clearInterval(timer);      // 移入：清掉定时器
hero.onmouseleave = () => timer = setInterval(next, 5000); // 移出：重建定时器

关键在于：clearInterval(timer) 是对「当前 timer 变量指向的那个定时器」生效。当鼠标在轮播边缘快速进出时：

leave → timer = setInterval(...) 建了一个新定时器 A
enter → clearInterval(timer) 把 A 清掉
但此时如果 enter 之前已经发生过一次 leave 且那个 setInterval 的返回值还没被赋给 timer（或赋给了但又被 enter 清掉后 leave 又建了一个），就会残留多余定时器

更典型的竞态是：enter 和 leave 交错触发时，clearInterval 和 re-assign 的执行顺序不可控，导致同一个时刻存在多个活动的 5 秒定时器，每个都在调 next()，触发时刻彼此错开 → 表现就是「偶尔乱跳、偶尔跳过、时快时慢」。

这就是典型的清定时器 + 重建定时器之间的异步竞态。

解决方案

重写为「单一存活定时器 + 暂停守卫」：

start() 用 if (timer) return 加锁——无论触发多少次，只允许存在一个定时器实例，绝不重复创建。
鼠标悬浮不再 clear/re-create——改用 paused = true/false 布尔守卫：悬浮时跳过切换，移出恢复，定时器始终保持单实例，从头到尾只创建一次。
圆点指示器点击改用闭包捕获索引，避免循环变量泄漏。

核心示意：

let timer = null;
let paused = false;

function start() {
  if (timer) return;          // 已存在实例，直接返回——防叠加
  timer = setInterval(() => {
    if (!paused) next();      // 暂停时不切换，但定时器仍存活
  }, 5000);
}

hero.addEventListener('mouseenter', () => { paused = true; });
hero.addEventListener('mouseleave', () => { paused = false; });
start();

这样：