javascript - 如何使用 jQuery/javascript 将事件处理限制为每 X 秒一次？

Question

对于快速触发的 keypress 事件，我想将事件的处理限制为每 X 秒最多一次。

我已经在使用 jQuery 进行事件处理，所以基于 jQuery 的解决方案是首选，尽管 vanilla Javascript 也很好。

• This jsfiddle显示按键快速触发，对操作没有任何限制

• This jsfiddle使用 setTimeout()

  在 vanilla JS 中将处理限制为每 0.5 秒一次

我的问题是

1. jQuery 是否有内置的方法来执行此操作？我在 .on() docs 中没有看到任何内容

2. 如果不是，是否有比我在 second jsfiddle example 中使用的更好的模式在 vanilla JS 中执行此操作？ ？

Answer 1

Does jQuery have an inbuilt way of doing this?

没有。

If not, is there a better pattern for doing this in vanilla JS than I've used in my second jsfiddle example?

除了使用 setTimeout 和标志，您可以跟踪最后一次调用处理程序的时间，并且仅在定义的时间间隔过去后调用它。这称为节流，有多种方法可以实现。

在最简单的形式中，您只需忽略在 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在 his comment 中提到，也许您需要的不是节流，而是去抖动。这是一个相似但略有不同的概念。 throttling 意味着某些事情应该每 x 毫秒只发生一次，debouncing 意味着只有在最后 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