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

Question

背景

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

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

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

因此,如果他们键入"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.
});

(我要花大约500毫秒的时间.)