仅每个时间间隔的 jQuery 事件答案

【问题标题】：jQuery event only every time interval仅每个时间间隔的 jQuery 事件
【发布时间】：2023-03-26 00:43:01
【问题描述】：

$(document).ready(function() {

    $('#domain').change(function() {

        //

    });

});

change 函数中的代码基本上会发送 ajax 请求来运行 PHP 脚本。 #domain 是一个文本输入字段。所以基本上我想要做的是发送 ajax 请求，因为用户在文本字段中输入一些文本（例如搜索建议）。

但是，我想设置一个时间间隔以减轻 PHP 服务器的负载。因为如果 jQuery 每次用户在文本字段中添加另一个字母时都发送 AJAX 请求，则会消耗大量带宽。

所以我想设置 2 秒作为间隔。每次用户输入字母时都会触发 AJAX 请求，但最大频率为 2 秒。

我该怎么做？

【问题讨论】：

见stackoverflow.com/questions/1715399/…和stackoverflow.com/questions/1620602/…和

标签： javascript jquery

【解决方案1】：

$(document).ready(function() {

    var ajaxQueue;

    $('#domain').change(function() {

        if(!ajaxQueue) {
           ajaxQueue = setTimeout(function() { 
              /* your stuff */
              ajaxQueue = null;
          }, 2000);
        }

    });

});

【讨论】：

这就是辉煌，它在 setTimeout 中定义。在那之前它将是未定义的（因此是错误的）。这实际上与在$(document).ready(...) 之前写var ajaxQueue = null; 相同。
这实际上是一个相当优雅的解决方案。绝对比跟踪事件之间的毫秒数要好。
嗯。使用此代码即使一次也不会执行 ajax 调用。
@thenduks：不是它不是，它从来没有被声明过，因此它最终会出现在 window 对象中，这是一件坏事。
@svinto: 一个没有 'var' 的变量，将是一个全局变量。这和把它放在 window 对象中是一样的，是的，但这正是 js 中的全局变量。如果您在代码的全局范围内编写 var a = 'test';，您也可以通过 window.a 访问它。这是相当标准的做法，我不能说这是一件坏事，但当然，它不是非常自我记录的代码

【解决方案2】：

我越来越多地遇到这个问题（我做 UI ajax 的东西越多）所以我把它打包成一个可用的插件here

【讨论】：

【解决方案3】：

两个变量，charBuffer，sendFlag

使用 setTimeout 让函数每两秒调用一次。
- 此函数检查缓冲区中是否有内容。
- 如果是，它会发送/清空这些内容并清除已发送标志（为假）。
  - 它还应该清除超时，并重新设置
- 否则它设置标志（为真）。
每次用户点击一个键时，将其存储在缓冲区中。
- 如果发送的标志是明确的（它是假的），什么也不做。
- 否则（它是真的）发送/清空当前在缓冲区中的东西并清除标志（为假），
  - 它还应该清除超时，并重新设置

这将使您第一次按下一个键时，它会被发送，并且必须至少经过 2 秒才能再次发送。

可以进行一些调整，但我使用此设置来做类似的事情。

【讨论】：

在这种情况下，文本输入字段可能是缓冲区...所以很多可能是多余的。

【解决方案4】：

没有在浏览器中尝试这个，我的脑海中浮现。像这样的：

$('#domain').change(function() {

    if (!this.sendToServer) { // some expando property I made up
        var that = this;
        this.sendToServer = setTimeout(function(that) {
            // use "that" as a reference to your element that fired the onchange.
            // Do your AJAX call here
            that.sendToServer = undefined;
        }, yourTimeoutTimeInMillis)
    }
    else {
        clearTimeout(this.sendToServer);
    }
});

【讨论】：

【解决方案5】：

您真正想要做的是检查自上次更改事件以来的时间，以便跟踪事件之间的毫秒数，而不是每 2 秒调用一次。

$(document).ready(function() {

    var lastreq = 0; //0 means there were never any requests sent
    $('#domain').change(function() {
         var d = new Date();
         var currenttime = d.getTime(); //get the time of this change event
         var interval = currenttime - lastreq; //how many milliseconds since the last request
         if(interval >= 2000){ //more than 2 seconds
            lastreq = currenttime; //set lastreq for next change event
            //perform AJAX call
         }

   });

});

【讨论】：

这个不需要mop-up函数把最后的更新发送到服务器吗？
@Bell 没有。它与更改事件相关联，因此如果此更改事件距上次更改事件超过 2 秒，则它会发送调用，否则它会忽略该事件。虽然我认为@d 的解决方案更干净，而且我会使用它。
如果我输入了两个字符，而第二个字符在它不应该发送的时候命中了……但是我从不输入第三个字符来再次触发它呢？

【解决方案6】：

$(function() {
  var timer = 0;
  $("#domain").change(function() {
    clearTimeout(timer);
    timer = setTimeout(function(){
      // Do stuff here
    }, 2000);
  });
});

【讨论】：