当输入多个字符时只触发一次 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

我能想到的方法有：

1. 使用超时，从最后一个 keyup 事件开始。对于打字速度较低的用户，这并不总是最好的，也不是那么精确。
2. 如果用户已完成输入单词，请使用 space 字符 do regconize。根据 length 和 total word count 的变化，您可以决定是否要发送 AJAX。

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