jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用jQuery/javascript将事件的处理限制为每X秒一次?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
对于快速触发的按键事件,我希望将事件的处理限制为每X秒最多一次.

我已经在使用jQuery进行事件处理,所以基于jQuery的解决方案会更受欢迎,尽管vanilla javascript也很好.

> This jsfiddle显示按键快速点火,不受任何操作限制
> This jsfiddle使用setTimeout()实现在vanilla JS中将处理限制为每0.5秒一次

我的问题是

> jQuery有内置的方法吗?我在.on()docs中看不到任何内容
>如果没有,在我的second jsfiddle example中使用香草JS是否有更好的模式?

解决方法

没有.

您可以跟踪上次调用处理程序的时间,而只是在定义的时间间隔过后调用它,而不是使用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

大佬总结

以上是大佬教程为你收集整理的如何使用jQuery/javascript将事件的处理限制为每X秒一次?全部内容,希望文章能够帮你解决如何使用jQuery/javascript将事件的处理限制为每X秒一次?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。