如何在setTimeout之后避免多个AJAX调用

Question

我有一个文本字段，我通过检查数据库中的匹配数量来响应输入，但是如果用户快速键入几个字符，我不想毫无理由地用太多查询来冲击数据库。

在网上搜索，建议似乎是把它全部包装在setTimeout()，但我显然不明白如何正确使用它。下面是我的代码:

$(".qs-text").keyup(function() {
if ($(this).val().length > 2) {
setTimeout(function() {
$.get("ajax_request.php?req=Quicksearch&qs=" + $(".qs-text").val(), function(data) {
$('.qs-hits').text(data);
});
}, 500);
} else {
$('.qs-hits').text('-');
}
});

它等待500ms，并且在超时时间结束时，它确实使用请求中字段的最终状态-好。

然而，它发送多个相同的请求(我输入的每个字符一个)，而不是只有一个。这就违背了设置超时的初衷。我几乎可以看到为什么代码会这样做，因为keyup事件每次都触发，但我不知道如何解决它。还有其他问题的标题听起来和我问的很像，但我读到的每个问题都很不同，我不能把它们中的任何一个都应用到我的案例中。

Answer 1

创建新文件时需要取消timeout

var timeout = null;
$(".qs-text").keyup(function() {
if(timeout != null) clearTimeout(timeout);
if ($(this).val().length > 2) {
timeout = setTimeout(function() { $.get("ajax_request.php?req=Quicksearch&qs="+$(".qs-text").val(), function(data) {
$('.qs-hits').text(data);
}); },500);
} else {
$('.qs-hits').text('-');
}
});

Answer 2

我们通常将timeout保存在变量中，然后在调用新变量时有条件地清除它。然而，对于大型web应用程序，我建议使用web套接字进行后续调用，以获得实时体验

var timer;
$(".qs-text").keyup(function() {
if ($(this).val().length > 2) {
clearTimeout(timer);
timer = setTimeout(function() {
$.get("ajax_request.php?req=Quicksearch&qs=" + $(".qs-text").val(), function(data) {
$('.qs-hits').text(data);
});
}, 500);
} else {
$('.qs-hits').text('-');
}
});

Answer 3

我建议使用lodash之类的东西来显示，所以你可以这样做

$(".qs-text").keyup(function() {  
_.debounce(()=> {
$.get("ajax_request.php?req=Quicksearch&qs="+$(".qs-text").val(), function(data) {
$('.qs-hits').text(data);
})
}, 500)

});

更多信息，请访问https://lodash.com/docs/4.17.15#debounce