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

对于快速触发的

keypress

事件，我希望将事件的处理限制为最多每X秒一次

我已经在使用jQuery进行事件处理，因此最好使用基于jQuery的解决方案，尽管香草javascript也不错

• 显示按键快速启动，操作无任何限制

• 使用

  setTimeout（）

我的问题是

jQuery是否有一种内在的方法来实现这一点？我在（）上的

.on>中没有看到任何内容

如果没有，在vanilla JS中有没有比我在我的应用程序中使用的更好的模式

---

记录上次处理事件的时间，每次收到事件时，检查所需的间隔是否已过

jQuery是否有一种内在的方法来实现这一点

没有

如果没有，那么在vanilla JS中有没有比我在第二个JSFIDLE示例中使用的更好的模式

您可以跟踪上一次调用处理程序的时间，而不是使用

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);
        }
    };
}

此实现的一个缺点是无法从事件处理程序返回值（例如

returnfalse；

）。可能有一些实现可以保留此功能（如果需要）

---

我会这样简单地进行事件限制：

$("#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/>");  
});

$（“#输入字段”）。在（“按键”，功能（事件）{
var now=Date.now（）；
var nt=$（this）.data（“lastime”）| | now；
如果（nt>now）返回；
$（此）.data（“lastime”，现在+500）；
$（“div#output”）.append（“按键
”）；
});
您可能想考虑使用KEYUP，除非您有一些理由需要重复。谢谢，我真的想在“纯”jQuery中做这件事而不用插件，但是这很有帮助——考虑推广回答，这样我就可以投票了！davnicwil：只有链接的答案是一件无聊的事情，我没有心情重新表述链接中已经提供的内容：-）如果你想让用户输入一个文本字段，在他完成输入后，你可以使用“更改”事件，这不是限制吗？我认为debounce的意思是，只要来电时间在一定的毫秒以内，就要继续移动超时时间，最后只有在事情稳定下来时才打一个电话。也许我有其他的方法…好吧，看起来它既不节流也不去抖动。。根据这个解释：P或者可能是节流。。。啊，但绝对不是debouncing@davnicwil它还将有助于确定应用程序的功能，因为去抖动可能更合适。例如，我从未在js中需要节流。。。假设您使用每个按键发送ajax请求。然后，当用户仍在键入时，限制将浪费请求。@Esailija:该事件是在一系列事件的开头触发的，而不是在事件的结尾触发的。看见也许有一种方法不需要设置超时，但我现在想不出一种方法（很晚了，我应该睡觉了。）@davnicwil：很多研究都是针对人类的用户体验和反应时间的，每两个事件在100毫秒的间隔内发生，就会被认为是同时发生的。也就是说，不能把这些区别开来。你可以称之为黑客，也可以称之为应用科学；）无论如何，不客气！：）
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);
    };
}

$("#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/>");  
});