检查在一定时间内是否“未”单击按钮（jQuery）答案

【问题标题】：Check if a button "hasn't" been clicked within a certain amount of time (jQuery)检查在一定时间内是否“未”单击按钮（jQuery）
【发布时间】：2012-08-22 21:01:15
【问题描述】：

你点击一个按钮，它就会运行function 1。
如果您未在 1 秒内再次单击该按钮，则 function 2 运行。
如果您在 1 秒内单击该按钮，则它会再次运行 function 1。
等等等等……

我无法弄清楚在 Javascript 中执行此操作的逻辑。

还有办法吗？

【问题讨论】：

你需要的是一个油门。 remysharp.com/2010/07/21/throttling-function-calls

标签： javascript jquery function button click

【解决方案1】：

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

核心线是：

var timer;

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

【讨论】：

【解决方案2】：

从我的头顶（还没有测试过，但这对我来说似乎最合乎逻辑）：

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

【讨论】：

【解决方案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 变量保留在本地范围内，而不创建全局变量。

【讨论】：

【解决方案4】：

使用setTimeout 和clearTimeout：

var t = null;
var timeoutMs = 1000; // in ms

$("#btn1").click(function (){
    func1();
    if (t !== null)
        clearTimeout(t);    
    t = setTimeout(func2, timeoutMs);
});

【讨论】：

【解决方案5】：

$('button').click(function() {
    console.log('Func 1');
    clearTimeout($(this).data('throttle'));
    $(this).data('throttle', setTimeout(function() {
        console.log('Func 2');
    }, 1000));
});

http://jsfiddle.net/dfsq/rrXWt/

【讨论】：