检查是否在一定时间内点击了“没有”按钮(jQuery)

时间:2012-08-22 21:01:15

标签: javascript jquery function button click

基本上:

您单击按钮并运行功能1.
如果您未在1秒内再次单击该按钮,则运行功能2 如果在1秒内单击该按钮,则再次运行功能1 依此类推......

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

还有办法吗?

先谢谢!

5 个答案:

答案 0 :(得分:5)

您需要使用计时器来跟踪时间。您可以使用setTimeout在1秒(1000毫秒)内运行功能2。但是,如果再次单击按钮,则应停止计时器。您可以使用clearTimeout

执行此操作

核心线将是:

var timer;

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

答案 1 :(得分:3)

从我的头顶(没有测试过这个,但这对我来说似乎最合乎逻辑):

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

答案 2 :(得分: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变量保留在本地范围中,而不创建全局变量。

答案 3 :(得分:2)

使用setTimeoutclearTimeout

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

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

答案 4 :(得分:0)

$('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/