当键入多个字符时，仅触发一次 HTML 输入事件

Question

我正在创建一个输入字段，其中应获取一些数据（通过 AJAX）并在用户每次将数据输入该字段时显示。但是，如果用户键入多个字符，比如他键入“test”以获取所有包含字符串“test”的记录，则不必在每个字符按下后执行 4 次查询，而是在他停止键入后执行一次查询。我可以想到几个带有全局变量的解决方案，我可以在其中检查是否再次触发了相同的事件，但是是否有一种非常优雅的方法可以做到这一点？也许检查键盘缓冲区中是否有东西，只有在它为空时才继续？或者是否存在仅在键盘缓冲区为空且所有字符都在输入字段中时才会触发的事件？

Answer 1

优雅的方法是使用超时，并在每次按键时不断清除之前的超时

var tID;

function keyUp (e) {
  if (tID) clearTimeout(tID);
  tID = setTimeout(function() {
    ... // make web call
  }, 2000);
}

这将确保仅在按下最后一个键后才调用网络调用（您可能需要调整超时值）

Answer 2

我能想到的方法有：

使用超时，从上次 keyup 事件开始。对于打字速度较慢的用户，这并不总是最好的，也不是那么精确。
使用 space 字符在用户完成输入单词时进行识别。根据 length 和 total word count 的变化，您可以决定是否要发送 AJAX。

根据您使用的输入类型，您可以选择最适合您的方法。第一个有点rigid。第二种方法要求用户在每次完成输入时按 space。两者兼而有之也许是一个甜蜜点。在现代，我认为每 keyup 发送一次请求不会对性能产生巨大影响。

当键入多个字符时，仅触发一次 HTML 输入事件

Fire HTML input-event only once when more than one character is typed

html

javascript

input

event-handling