如何延迟 Keyup 处理程序以防止用户打字期间出现过多的 AJAX 请求？-js教程-PHP中文网

如何延迟 Keyup 处理程序以防止用户打字期间出现过多的 AJAX 请求？

Mary-Kate Olsen

发布： 2024-12-14 20:44:11

原创

524 人浏览过

How Can I Delay a Keyup Handler to Prevent Excessive AJAX Requests During User Typing?

延迟用户键入停止的 .keyup() 处理程序

在搜索字段中，对每次按键的立即 AJAX 搜索可能会导致交通量过多。为了缓解这种情况，需要实现延迟，仅当用户停止输入时才允许搜索。

为了实现这一点，提供的代码片段利用了delay() 函数。此函数在指定时间后或在快速触发事件（如调整大小）时执行回调。它的使用方法如下：

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}

// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

登录后复制

在此示例中，delay() 函数用于在用户停止在 #input 字段中输入 500 毫秒时延迟控制台日志的执行。这可确保仅在用户完成输入后才执行 AJAX 搜索。

以上是如何延迟 Keyup 处理程序以防止用户打字期间出现过多的 AJAX 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！