鼠标移动事件导致无限循环，即使在鼠标移动停止后也是如此

Mousemove event is causing infinite loop even after mousemovement has stopped

本文关键字：移动 鼠标 事件 无限循环      更新时间：2023-09-26

这是有问题的页面： http://yac-web.com/clients/dessert/我正在尝试设置一种在鼠标移动时发生并在不移动时停止的效果。由于某种原因，事件开始正常，但随后只是继续循环。我对JS不是很熟悉，找不到太多关于鼠标移动事件的信息。谢谢

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

然后

html {
    background: rgba(191, 54, 245, 1);
}
.change {
    background: rgba(61, 98, 245, 1);
}

演示：小提琴

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

解决方案是，如果有动画正在进行，则不要添加更多切换，请尝试

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");
})

演示：小提琴

就实际解决问题而言，Arun P Johny的答案可能是最好的，但是它并没有深入探讨它为什么会发生。

这就是问题发生的原因：

每次鼠标位置更新时（每秒几次，除非您有严重的滞后;我假设更新之间的间隔为 1/16 秒），它会在需要执行的动画列表的末尾添加一个新动画。然后，当您停止移动鼠标时，队列中仍然保留了许多动画，每个动画需要整整一秒钟。它每移动鼠标 1/16 秒在动画时间上增加一秒。因此，如果您移动它一秒钟，则动画将在您开始后的 16 秒停止。

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

相关文章：