javascript - 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()
});

---

编辑以更好地理解

假设我在字段中输入“test”，然后我再次输入“test”1s，然后输入“testtest”。完成此操作后，我得到了 55 个 Ajax POST。我想问的是，我该如何阻止这种情况发生。

Answer 1

添加清除超时(定时器)；在 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();
});