jquery - Jquery杀死不需要的超时

Question

所以我有2个按钮。

按钮a：是一个按钮。(#button1)

按钮 b：假提交按钮。(#right_r)

按钮 c：提交按钮。（＃正确的）

默认情况下，按钮 A 将显示，并且在单击时会 preventDefault() 并显示错误消息。

当我点击按钮 A 时，它会设置超时 8000，因此在 8 秒内，它将用按钮 C 替换按钮 B。

但问题是：

当用户多次单击按钮 A 时，它会设置很多超时。

我想要做的是，在设置新的超时之前杀死以前的超时，like stop it.

我的代码：

$(document).ready(function() {
    $("#right_r").click(function(event) {
        event.preventDefault();
        $("#error").slideDown("slow");

        setTimeout(function() {
            $("#error").slideUp("slow");    
        }, 1000);
    });
    $("#button1").click(function() {
        setTimeout(function() {
            $("#right_r").hide();
            $("#right").show();
        }, 8000);
    });
});

谢谢。

Answer 1

尝试这个

var right_r_timeout = null, runelocus_timeout = null;
$(document).ready(function() {
    $("#right_r").click(function(event) {
        event.preventDefault();
        $("#error").slideDown("slow");

        if (right_r_timeout != null) {
            clearTimeout(right_r_timeout);
            right_r_timeout = null;
        }
        right_r_timeout = setTimeout(function() {
            $("#error").slideUp("slow");
        }, 1000);
    });

    $("#runelocus").click(function() {
        if (runelocus_timeout == null) {
            clearTimeout(runelocus_timeout);
            runelocus_timeout = null;
        }
        runelocus_timeout = setTimeout(function() {
            $("#right_r").hide();
            $("#right").show();
            runelocus_timeout = null;
        }, 8000);
    });
});

见https://developer.mozilla.org/en/docs/DOM/window.setTimeout

Answer 2

如果您使用内置的延迟方法，这将很容易..

$("#error").stop(true,true).slideDown("slow").delay(1000).slideUp("slow")

但是请注意，.delay()仅延迟动画方法和.queue'd 方法。