每5秒響應一次事件

Question

我試圖運行一個函數，使用setInterval()並單擊。當我點擊時，我想每五秒運行一次功能somefunction()。

這裏是我的代碼：

function somefunction(){ // do something } 

setInterval(function(){ 
    $('#division').one("click",function(){ 
    somefunction(); 
    }); 
}, 5000); 

這裏的問題是，事件setInterval()被排隊並在30秒的功能somefunction()說;運行6次（點擊6次）。

但我希望它只運行一次並等待下一個5秒鐘。

我試過.stop()，.dequeue()和.clearqueue()，雖然沒有任何工作。

感謝您的幫助！

Answer 1

忽略小於5秒前的每次點擊操作如何？

function somefunction() { /* do something */ } 

$('#division').on("click", function() { 
    var lastClicked = $(this).data("lastClicked") || 0; 

    if (new Date() - lastClicked >= 5000) { 
    $(this).data("lastClicked", new Date()); 
    somefunction(); 
    } 
}); 

另外，計劃按照最後一個點擊，只要行動計劃忽略所有點擊：

function somefunction() { /* do something */ } 

$('#division').on("click", function() { 
    var $this = $(this), 
     lastClicked = $this.data("lastClicked") || 0, 
     isScheduled = $this.is(".scheduled"); 

    if (!isScheduled) { 
    $this.addClass("scheduled"); 
    setTimeout(function() { 
     somefunction() 
     $this.removeClass("scheduled").data("lastClicked", new Date()); 
    }, Math.max(0, 5000 - (new Date() - lastClicked))); 
    } 
}); 

參見：http://jsfiddle.net/Tomalak/ZXfMQ/1/

Answer 2

如果你確定有然後我推薦使用它的debounce功能：

$('#division').on('click', _.debounce(someFunction, 5000, true)); 

另外，這裏是an excellent article about how debouncing works。

如果你想推出自己的反跳，它是如此簡單：

$('#division').on('click', (function(func, wait, immediate) { 
    var timeout, 
     result; 
    return function() { 
     var self, 
      args, 
      callNow; 
     function later() { 
      timeout = null; 
      if (!immediate) result = func.apply(self, args); 
     } 
     self = this; 
     args = arguments; 
     callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) { 
      result = func.apply(self, args); 
     } 
     return result; 
    }; 
}(someFunction, 5000, true)))); 

...只是在開玩笑，這只是強調的防抖動功​​能內嵌。