检查某个按钮是否在一段时间内未被点击(jQuery)

Question

基本上：

你点击一个按钮，它就会运行函数1。

如果你在1秒内没有再次点击按钮，那么函数2就会运行。

如果您在1秒内单击该按钮，则它将再次运行function 1。

诸如此类……

我不明白在Javascript中做这件事的逻辑。

有什么办法吗？

在进阶时谢谢！

Answer 1

从我的头顶(我没有测试过，但对我来说这似乎是最符合逻辑的)：

var t = null;

$("button").click(function() {
    console.log("this is function 1");
    if (t !== null) { window.clearTimeout(t); }

    t = window.setTimeout(function() {
        console.log("and this is function 2");
    }, 1000);
});

Answer 2

您需要使用计时器来记录时间。您可以使用setTimeout在1秒(1000ms)内运行函数2。但是，如果您再次单击按钮，则应停止计时器。您可以使用clearTimeout来做到这一点。

核心代码将是：

var timer;

// in button's click handler:
clearTimeout(timer);
timer = setTimeout(function2, 1000);

Answer 3

这应该可以做到：

(function() {
    var timer = null;

    $('#button').on('click', function() {
        function1();                         // always call function1
        clearTimeout(timer);                 // clear the timer
        timer = setTimeout(function2, 1000); // run function2 1s later
    });
})();

请参阅http://jsfiddle.net/alnitak/QZRTA/

外部函数块用于在不创建全局变量的情况下将timer变量保留在局部范围内。