Понимание stop() и обратных вызовов в jQuery

Question

У меня есть эта скрипка с такой функцией:

$("#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() метод и отмените задержку.

Смотрите этот ответ: Как остановить задержку.

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