我已经在使用jQuery进行事件处理,所以基于jQuery的解决方案会更受欢迎,尽管vanilla javascript也很好.
> This jsfiddle显示按键快速点火,不受任何操作限制
> This jsfiddle使用setTimeout()实现在vanilla JS中将处理限制为每0.5秒一次
我的问题是
> jQuery有内置的方法吗？我在.on()docs中看不到任何内容
>如果没有,在我的second jsfiddle example中使用香草JS是否有更好的模式？
解决方法
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间隔时间内进行的每个调用,以便每个间隔中只发生一次调用.
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));
正如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;).也许有些实现可以保留此功能(如果需要).
