了解 jQuery 中的 stop() 和回调

Question

我有这个 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)。这不会阻止第一次点击的回调被执行和完成吗？如果不是，我如何强制它这样做？

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

了解 jQuery 中的 stop() 和回调

Understanding stop() and callbacks in jQuery

jquery

jquery-callback