Javascript Mousemove事件即使在Mousemove停止后也会导致无限循环

这里是有问题的页面：我试图设置一种效果，当鼠标移动时会发生，当鼠标不移动时会停止。由于某些原因，事件开始时很好，但随后继续循环。我不太熟悉JS，也找不到关于mousemove事件的更多信息。谢谢

$('html').mousemove(function () {
    $('html').toggleClass("change", 1000, "easeOutSine");
})

然后

---

演示：

基本问题是，当鼠标移动时，您正在对许多使用排队系统的切换类进行排队，因此即使在鼠标停止后，动画仍将继续运行

解决方案是不添加更多切换。如果正在制作动画，请尝试

var flag = false;
$('html').mousemove(function () {
    if (flag) {
        return;
    }
    flag = true;
    $('html').toggleClass("change1", 1000, "easeOutSine", function () {
        flag = false;
    });
})

演示：

另一种是使用选择器

---

演示：

就实际解决问题而言，阿伦·约翰尼的答案可能是最好的，但它并没有深入到问题发生的确切原因

这就是问题发生的原因：

每次鼠标位置更新（每秒几次，除非您有严重的延迟；我将假设更新间隔为1/16秒），它会在需要执行的动画列表的末尾添加一个新动画。然后，当您停止移动鼠标时，队列中仍有许多动画，每个动画都需要整整一秒钟的时间。它是每移动鼠标1/16秒向动画时间添加一秒。因此，如果移动它一秒钟，动画将在启动后16秒停止

---

这可以通过确保在旧动画完成之前不添加新动画来解决。

请在问题中发布您的代码。问题在于动画的排队特性感谢这非常有用，现在有没有一种方法可以做到这一点，当鼠标停止移动时，转换实际上会暂停或停止，而不是在队列中完成当前的转换？实际上，在这两个演示中，效果都在继续循环。也许切换类不是最好的方法？或者问题是由mousemove的工作方式引起的？

var flag = false;
$('html').mousemove(function () {
    if (flag) {
        return;
    }
    flag = true;
    $('html').toggleClass("change1", 1000, "easeOutSine", function () {
        flag = false;
    });
})

var $html = $('html').mousemove(function () {
    if ($html.is(':animated')) {
        return;
    }
    $('html').toggleClass("change1", 1000, "easeOutSine");
})