Jquery杀死不需要的超时

Question

所以我有 2 个按钮。

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

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

按钮 c：提交按钮。 (#right)

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

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

但问题是：

当用户多次点击按钮 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 方法。