理解 jQuery 中的 stop() 和回调

Posted 2023-05-08

【中文标题】理解 jQuery 中的 stop() 和回调

【英文标题】：Understanding stop() and callbacks in jQuery

【发布时间】：2015-10-14 04:17:00

【问题描述】：

我有这个fiddle，它的功能如下：

$("#success").stop(true, true).css(
    "top": offT,
        "opacity": 0
).animate(
    "top": "-=40",
        "opacity": 1
, 700, function () 
    $(this).delay(4000).animate(
        "opacity": 0
    , 1200);
);

当您单击一次按钮时，没有问题。但是尝试单击一个按钮，大约两秒钟后单击另一个按钮。您会注意到，div 隐藏得更快，而不是延迟淡出 4 秒。也就是说，当点击第二个按钮时，第一次点击发起的回调仍然是活跃的。我觉得这很奇怪，因为我打电话给stop(true,true)。这不会阻止第一次单击的回调被执行和完成吗？如果没有，我该如何强制它这样做？

【问题讨论】：

您已将 onClick 函数绑定到两个按钮。第一个动画由第二个按钮单击停止，然后单个#success div 由第二个按钮的 onClick 操作。

@Daniel 但是为什么第二次点击的.stop函数不阻止/禁用/销毁第一次点击的回调呢？

设置 stop(true, true) 为 stop(true, false)

@Daniel 这也不起作用：jsfiddle.net/fnqxkxgg/2

对我来说很好。 div 在第一次按下按钮时动画，然后在第二次按下按钮时它移动到第二个按钮并再次动画，然后在 4 秒后淡出。它应该做什么？

【参考方案1】：

它应该阻止回调被执行，但是在你第二次点击后回调已经被执行——延迟在队列中。

为了防止这种情况，您可以使用 JS window.setTimeout() 方法并取消延迟。

看到这个答案：How to stop the delay。

var delay;
$("button").click(function () 
    var offT = $(this).offset().top;
    window.clearTimeout(delay);
    $("#success").stop(true, false).css(
        "top": offT,
            "opacity": 0
    ).animate(
        "top": "-=40",
            "opacity": 1
    , 700, function () 
        delay = window.setTimeout(function() 
            $("#success").animate(
                "opacity": 0
            , 1200);
        , 4000);
    );
);