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

Question

基本上：

您单击一个按钮，它会运行功能 1。
如果您在 1 秒内未再次单击该按钮，则会运行功能 2。
如果您在 1 秒内单击该按钮，则它会再次运行功能 1。
等等等等...

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

有没有办法？

提前致谢！

Answer 1

您将需要使用计时器来跟踪时间。您可以setTimeout在 1 秒（1000 毫秒）内运行函数 2。但是，如果您再次单击按钮，您应该停止计时器。您可以使用clearTimeout.

核心线将是：

var timer;

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

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

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变量保持在本地范围内，而不创建全局变量。

Answer 4

使用setTimeout和clearTimeout：

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

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

Answer 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/