理解jQuery

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

当您点击一次按钮时，没有问题。但是尝试点击按钮，大约两秒后再点击另一个按钮。你会注意到，除了将淡出时间延迟4秒之外，div还能更快地隐藏起来。换句话说，单击第二个按钮时，第一次单击启动的回调仍处于活动状态。我发现这很奇怪，因为我打电话给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);
    });
});