解决方法@H_301_14@

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和flags.这被称为限制,并且有各种方法来实现它.

在最简单的形式中,您只需忽略在lastCall间隔时间内进行的每个调用,以便每个间隔中只发生一次调用.

例如.这是一个返回一个新函数的函数,只能每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在0700年提到的那样,也许它不是你需要的限制,而是去抖动.这是一个类似但略有不同的概念.虽然限制意味着某些事情应该每x毫秒只发生一次,但是去抖动意味着只有在最后x毫秒内没有发生某些事情时才会发生.

典型的例子是滚动事件.将经常调用滚动事件处理程序,因为事件基本上是连续触发的.但也许你只想在用户停止滚动而不是滚动时执行处理程序.

实现此目的的一种简单方法是使用超时并在再次调用该函数时取消它(并且超时尚未运行)：

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