如何解决JavaScript - 自动完成的去抖/节流功能
以下代码是我在用户在搜索框中键入时生成自动完成建议的实现。
当前去抖动为 350 毫秒。它工作正常,但有时我注意到自动完成结果滞后,即使在用户完成输入后,新建议也会出现在搜索建议框中。
目前,autosuggest.php
文件中的 API 在用户停止输入后被调用,就像请求被延迟了去抖动时间。这不是我想要发生的。
我应该如何优化此功能,以便自动完成建议不会滞后,并且在用户完成输入后停止发出 API 请求?
总的来说,我这样做是为了限制对 autosuggest.php
文件发出的请求数量,例如,如果用户打字速度非常快。
<script>
function getSuggestions(){
var query = document.getElementsByName("q")[0].value;
$(document).ready(function(){
$("#suggestions").load("https://example.com/autosuggest.php",{
q: query
});
console.log(query); // For testing
});
}
$(document).ready(function(){
let debounce;
$('.searchBox').on('keydown',function(e){
// get keycode of current keypress event
var code = (e.keyCode || e.which);
// do nothing if it's an arrow key
if(code == 37 || code == 38 || code == 39 || code == 40 || code == 13) {
return;
}
// do normal behaviour for any other key
debounce = setTimeout(() => {
getSuggestions();
},350);
});
$(".searchBox").click(function(){
getSuggestions();
});
});
</script>
<input class="searchBox" type="text" name="q" placeholder="" value="" onkeydown="getSuggestions()">
<div id="suggestions">
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。