Ajax提出過多要求

Question

因此，在用戶停止在字段.search輸入3秒鍾（考慮完成輸入）后，我已經在我的代碼中進行了設置，將其發送到getData.php頁面。 但是我注意到，如果說某個用戶鍵入的速度較慢（例如每秒1個字母），或者在大約1秒后開始鍵入，則對於每個鍵入的字母，它會發送更多的Ajax請求（大約15/20，具體取決於多少個字母）。 而不是整個單詞的1個請求。

這是我的代碼：

$(".search").on('input', function() {
    $(".search").keyup(function() {
        timer = setTimeout(function() {

            $.ajax({
                type: "POST",
                url: "getData.php",
                data: {search: $(".search").val()}
            }).done(function(data) {
                $(".searchReturn").text(data);
                $(".loading").hide();
            });

            $(".searchReturn").fadeIn(750);

        }, 3000);

        $(".search").keydown(function() {
            clearTimeout(timer);
        });

        $(".loading").fadeIn(250);
    });

    $(".searchReturn").hide()
});

---

EDIT FOR BETTER UNDERSTANDING

假設我在字段中輸入“ test”，然后再次輸入“ test” 1s，然后輸入“ testtest”。 完成此操作后，我得到了55個Ajax POST。 我要問的是，如何阻止這種情況的發生。

Answer 1

添加clearTimeout（timer）; 在keyup處理程序中

$(".search").on('input', function() {
    $(".search").keyup(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {

            $.ajax({
                type: "POST",
                url: "getData.php",
                data: {search: $(".search").val()}
            }).done(function(data) {
                $(".searchReturn").text(data);
                $(".loading").hide();
            });

            $(".searchReturn").fadeIn(750);

        }, 3000);


        $(".loading").fadeIn(250);
    });

    $(".searchReturn").hide();
});