Question

这就是我想要做的事情：

用户点击按钮，运行功能A
如果按钮没有在1秒内再次点击，则运行功能B
如果点击了按钮，重复（再次运行功能A并检查功能B）

这是我尝试过的

var clicked = false;

$('#button').click(function(){
    A();
}); 

function A(){
    clicked = true;
    setTimeout(function(){
         clicked == false;
    )}, 1000);

    setTimeout(function(){
        if ( clicked == false ) {
            B();
        }
    )}, 1000);
}

我认为代码适用于 1 和 2 的情况，但我如何才能将其用于 3 ？

编辑：在发布时看到相关的SO question，我通过搜索找不到。请等一下我检查它是否重复

Answer 1

我认为您希望节流（缓冲）点击次数，也就是说，您希望在行动前等待指定的时间，如果在您的限制期内再次发生同一事件，则重新启动等待。 http://jsfiddle.net/8QdLV/

function B() {
    console.log('Clicked')
}
var timeoutId;
$('#button').click(function() {
    clearTimeout(timeoutId);
    timeOutId = setTimeout(B, 1000);
});

这可以概括为http://jsfiddle.net/8QdLV/

function throttle(handler, buffer) {
    var timeoutId;
    buffer = buffer || 1000;
    return function(e) {
        clearTimeout(timeoutId);
        var me = this;
        timeoutId = setTimeout(function() {
            handler.call(me, e);
        }, buffer);
    }
}

$('button').click(throttle(function() {
    console.log('Throttled click');
});

顺便说一句，您可能希望使用https://code.google.com/p/jquery-debounce/，它还提供了$.throttle功能

Answer 2

使用setInterval功能。

请注意，使用布尔值记录点击是不够的，否则t=0点击两次，t=0.99都会被t=1的重置操作清除。

var clicked = false
  , hnd_reset = null
  , hnd_check = null;

$('#button').click(function() {
    A();
}); 

function A(){
    clicked = true;
    hnd_reset = setTimeout(function(){
         clicked = false;
         hnd_reset = null;
    )}, 1000);

    if (hnd_check === null) {
        hnd_check = setInterval(function(){
            if ( !clicked && (hnd_reset === null)) {
                clearInterval( hnd_check );
                hnd_check = null;
                B();
            }
        )}, 1000);
    }
}

或者，您可以跟踪从0开始的int中的点击次数，如果跟踪器为0，则允许执行B。

检查是否在时间内点击了按钮

2 个答案: