javascript - JavaScript - 自动完成的去抖动/节流功能

Question

以下代码是我在用户在搜索框中键入时生成自动完成建议的实现。

当前的去抖时间为 350 毫秒。它工作正常，但有时我注意到自动完成结果滞后，即使在用户完成输入后，新的建议也会出现在搜索建议框中。

目前，文件中的 API 在autosuggest.php用户停止输入后被调用，就像请求滞后于去抖动时间一样。这不是我想要发生的。

我应该如何优化此功能，以便自动完成建议不会落后，并且在用户完成输入后停止发出 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>

标签： javascriptjqueryautocompletethrottlingdebounce