延迟过滤

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) 无法再清除超时。