如何向 jQuery .keyup() 处理程序添加打字延迟？-js教程-PHP中文网

如何向 jQuery .keyup() 处理程序添加打字延迟？

Barbara Streisand

发布： 2024-12-07 08:10:13

原创

665 人浏览过

How to Add a Typing Delay to a jQuery .keyup() Handler?

如何在 .keyup() 处理程序中实现键入延迟

使用每次按键时触发操作的搜索字段时按下后，实施延迟以减少不必要的查询可能是有益的。本文探讨了如何实现这种延迟，确保查询仅在键入暂停后执行。

.keyup() 处理程序不提供引入延迟的固有选项。但是，可以使用自定义函数来实现此行为。一种常见的方法是使用 setTimeout() 函数。

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

登录后复制

该函数有两个参数：callback（延迟后执行的函数）和 ms（延迟持续时间，以毫秒为单位）。

要通过 .keyup() 处理程序使用此函数：

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

登录后复制

在此示例中，“输入”字段的.keyup() 事件触发延迟函数，每次按键后等待 500 毫秒。仅当用户停止输入半秒时才会执行回调，记录输入字段的当前值。

以上是如何向 jQuery .keyup() 处理程序添加打字延迟？的详细内容。更多信息请关注PHP中文网其他相关文章！