jQuery仅每x秒运行一次AJAX

Question

我正在尝试创建一个使用ajax从PHP脚本获取搜索结果的文本输入。 基本上，此刻脚本将每个字母一一发送给PHP，PHP必须查询数据库中每个字母的结果。

相反，我希望就像在1秒钟内键入“ Word”一样，它只是搜索整个“ Word”，而不是对“ W”，“ Wo”，“ Wor”，“ Word”进行多次搜索。

我尝试为其使用window.SetTimetout，但这只是使其搜索运行晚了2秒，但字母仍然按1发送。

$("#search").keyup(function(e) {
    var keyword = $("#search").val();
    window.setTimeout(function() {
        $.ajax({
            url: "GetItemList.php?search="+keyword,
            success: function(result) {
                $(".left").html(result);
            }
        });
    },2000);
});

Answer 1

清除超时

var lastTimeout = null;
$("#search").keyup(function(e) {
    var keyword = $("#search").val();
    if (lastTimeout)
        clearTimeout(lastTimeout)
    lastTimeout = window.setTimeout(function() {
        $.ajax({
            url: "GetItemList.php?search="+keyword,
            success: function(result) {
                $(".left").html(result);
            }
        });
    },2000);
    });

Answer 2

在创建新超时之前，您需要检查是否已有超时。 像这样：

var myTimeout = null;

$("#search").keyup(function(e) {
    var keyword = $("#search").val();

    if(myTimeout != null) {
        myTimeout = window.setTimeout(function() {
        $.ajax({
            url: "GetItemList.php?search="+keyword,
            success: function(result) {
                $(".left").html(result);
            myTimeout = null;
            }
        });
        },2000);
    }
});

这样，如果您连续输入10秒钟，最终将总共发出4或5个请求，每2秒左右发出一次。