javascript - 延迟过滤

Question

我正在尝试用 Javascript 做一个延迟过滤器。基本上我有一个文本框，用户可以在其中输入他的搜索词。但是，我不想在每次按键时过滤数据，而是在每次按键后等待 3 秒，然后一旦用户停止输入字符并且这 3 秒过去，就会触发过滤/搜索。

下面是我的尝试，但是每次我输入一个字符时，搜索都会在 3 秒后触发。有人可以告诉我我做错了什么吗？另外，有没有办法自动抓取文本字段内的文本，而不分配输入 id/类(想法是对不同的文本字段使用相同的函数)？如果可能的话，我希望保持简单的 Javascript，而不需要 jQuery。

HTML:

<input type="text" id="search" onKeyDown="filter(3);">

JS:

function filter(secs) {

 var delay = 0;
 var delayTimeout;

 delay = secs*1000;
 clearTimeout(delayTimeout);

 delayTimeout = setTimeout(mySearchFunction, delay);

}

function mySearchFunction() {
   searchterm = document.getElementById('search').value;
   alert("Searching for: " + searchterm);   
}

Answer 1

将 delayTimeout 声明移出 filter 函数:

var delay = 0;
var delayTimeout;

function filter(sec){
    // etc

否则，每次调用 filter() 时都会重置 delayTimeout，这意味着 clearTimeout(delayTimeout) 无法清除不再超时。