如何在用户输入时延迟KeyPressfunction，因此它不会触发每次击键的请求？

背景

我在页面上有很多下拉菜单。 如果更改第一个，则根据您选择的内容更新其余下拉列表。

在我们的案例中，我们处理基金数据。 所以第一次下拉是“所有基金类型”。 您选择“对冲基金”，下一个下拉列表将按仅适用于对冲基金的选项进行过滤。

客户端现在要求我将一个文本字段放入混合中，当用户开始输入时，将影响这些结果。

因此，如果他们键入“USD”，则第二个下拉列表将仅包含名称中包含“USD”的资金的选项。

问题

我遇到的具体问题是我正在使用的代码：

$('#Search').keypress(function () { // trigger the updating process }); 

它触发了每个按键的搜索。 因此，当我输入“USD”时，我立即收到3个请求 – 一个用于“U”，一个用于“US”，一个用于“USD”。

我已尝试使用此设置超时：

 $('#Search').keypress(function () { // I figure 2 seconds is enough to type something meaningful setTimeout(getFilteredResultCount(), 2000); }); 

但所有这一切都是在做我所描述的事情之前等待2秒。

我确信这个问题以前已经解决了。 有人可以建议如何解决这个问题吗？

Answer 1

之前我这样做的方法是设置超时，但每次按下新键时清除现有的超时。 这样，您应该只在用户停止输入时才发送请求。

 var timeoutId = 0; $('#Search').keypress(function () { clearTimeout(timeoutId); // doesn't matter if it's 0 timeoutId = setTimeout(getFilteredResultCount, 500); // Note: when passing a function to setTimeout, just pass the function name. // If you call the function, like: getFilteredResultCount(), it will execute immediately. }); 

（我要去约500ms超时。）