JavaScript实现鼠标悬停中心元素时暂停外圈自动旋转的问题

问题1：悬停时多移动一次才暂停 #

原因：触发hover清除定时器时，可能已有一次movetheone调用在队列中等待，或是当前动画已启动。需要在hover时不仅清定时器，还要立刻停止当前动画，确保外圈马上停在当前位置。

问题2：鼠标移出后无法恢复自动旋转 #

原因：移出回调里只写了movetheone，这只是函数引用没有实际执行；而且之前的定时器已被清除，必须重新创建定时器实例才能继续自动旋转。

修改后的代码 #

function movetheone() {
  i.is(":animated") || (p.direction = "right", p.step = d, o())
}
let abc = setInterval(movetheone, 3000);

$('.circle--rotate').hover(() => {
  clearInterval(abc);
  // 停止当前动画并清空队列，确保立刻暂停在当前位置
  i.stop(true, false);
}, () => {
  // 重新创建定时器
  abc = setInterval(movetheone, 3000);
  // 可选：移出后立刻执行一次移动，若想等3秒再动可删除这行
  movetheone();
})

额外说明 #

• i.stop(true, false)：第一个参数true清空动画队列，阻止后续等待的动画；第二个参数false不让当前动画跳转到结束状态，保证外圈停在当前显示的元素上。
• 移出时重新赋值abc = setInterval(...)是因为旧定时器已失效，必须重新创建才能恢复自动旋转逻辑。

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