当输入多个字符时，仅触发一次HTML input-event

Question

我正在创建一个输入字段，其中应该获取一些数据(通过AJAX)，并在每次用户向该字段输入数据时显示。但是，如果用户输入了几个字符，就说他输入了&;test&;要获取包含字符串&;test&;的所有记录，不需要在按下每个字符后执行4次查询，而是在停止键入后执行一次查询。我可以想到几个解决方案，使用全局变量检查是否再次触发了相同的事件，但是是否有真正优雅的方法来做到这一点?也许检查是否有东西在键盘缓冲区，只有在它是空的?或者只有当键盘缓冲区为空并且所有字符都在输入字段中时才触发事件?

Answer 1

优雅的方法是使用超时，并在每次按下

键时清除之前的超时

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

这将确保web调用只在按下最后一个键后才被调用(您可能需要调整超时值)

Answer 2

我能想到的实现这一点的方法有:

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

根据所处理的输入类型，您可以选择最适合您的方法。第一个有点像rigid。第二种方法要求用户每次输入完毕时按下space。两者兼而有之或许是最佳选择。在现代，我不认为每个keyup都发送请求会造成巨大的性能影响。