如何使用jQuery / javascript將事件的處理限制為每X秒一次？

Question

對於快速觸發的keypress事件，我希望將事件的處理限制為每X秒最多一次。

我已經在使用jQuery進行事件處理，所以基於jQuery的解決方案會更受歡迎，盡管vanilla javascript也很好。

• 這個jsfiddle快速顯示按鍵觸發，不受任何操作限制

• 這個jsfiddle使用setTimeout()實現將vanilla JS中的處理限制為每0.5秒一次

我的問題是

1. jQuery有內置的方法嗎？ 我在.on() 文檔中沒有看到任何內容

2. 如果沒有，在我的第二個jsfiddle例子中使用vanilla JS有沒有更好的模式呢？

Answer 1

jQuery有內置的方法嗎？

沒有。

如果沒有，在我的第二個jsfiddle例子中使用vanilla JS有沒有更好的模式呢？

您可以跟蹤上次調用處理程序的時間，而只是在定義的時間間隔過后調用它，而不是使用setTimeout和flags。 這被稱為限制，並且有各種方法來實現這一點。

在最簡單的形式中，您只需忽略在lastCall + interval時間內進行的每個調用，以便每個間隔中只發生一次調用。

例如，這是一個返回一個新函數的函數，該函數每X毫秒只能調用一次：

function throttle(func, interval) {
    var lastCall = 0;
    return function() {
        var now = Date.now();
        if (lastCall + interval < now) {
            lastCall = now;
            return func.apply(this, arguments);
        }
    };
}

你可以用作

$("#inputField").on("keypress", throttle(function(event) {
   $("div#output").append("key pressed <br/>");  
}, 500));

DEMO

---

正如Esailija在他的評論中提到的那樣，也許你不需要扼殺 ，而是要貶值 。 這是一個類似但略有不同的概念。 雖然限制意味着某些事情應該每x毫秒只發生一次，但是去抖動意味着只有在最后x毫秒內沒有發生某些事情時才會發生。

典型的例子是scroll事件。 將經常調用滾動事件處理程序，因為事件基本上是連續觸發的。 但也許你只想要執行的處理程序，當用戶停止滾動，而不是當他滾動。

實現此目的的一種簡單方法是使用超時並在再次調用該函數時取消它（並且超時尚未運行）：

function debounce(func, interval) {
    var lastCall = -1;
    return function() {
        clearTimeout(lastCall);
        var args = arguments;
        var self = this;
        lastCall = setTimeout(function() {
            func.apply(self, args);
        }, interval);
    };
}

此實現的缺點是您無法從事件處理程序返回值（例如return false; ）。 也許有些實現可以保留此功能（如果需要）。

DEMO

Answer 2

我會做那個事件限制就像這樣簡單：

$("#inputField").on("keypress", function(event) {
    var now = Date.now();
    var nt = $(this).data("lastime") || now; 
    if( nt > now ) return;
    $(this).data("lastime", now + 500);  
    $("div#output").append("key pressed <br/>");  
});

Answer 3

記錄上次處理事件的時間，並且每次收到事件時，都要檢查是否已經過了所需的時間間隔。