Question

我在搜索框上有一个keyup事件，它通过从db获取数据来产生建议。它工作正常。但是当我快速按下键盘按钮时会出现问题，并且对于每个keyup事件，它会产生重复的结果。

我尝试使用

$("#search").on("keyup", function() {
    setTimeout(getLocationFromDb, 1000);
});

但是仍然会产生相同的结果（向每个keyup事件发送请求到服务器。）

我一直在寻找解决方案但找不到解决方案。谢谢你的帮助。

修改我正在清除结果beforeSend并将结果附加到success。

Answer 1

您的方法并不是那么糟糕 - 只需确保在设置新的时间之前清除所有旧的时间。你当然必须存储超时somwhere - 例如，你可以在闭包内创建一个变量。

此代码仅在1秒内没有新输入时调用您的回调：

$("#search").on("keyup", (function () {
    var timeout;
    return function (e) {
        window.clearTimeout(timeout);
        timeout = window.setTimeout(getLocationFromDb, 1000);
    }
})());

小提琴：http://jsfiddle.net/uq4x9/

Answer 2

您可以使用布尔变量来检测ajax调用是否已在发送新

之前完成

var isAjaxSent = false;
$("#search").on("keyup", function() {
   isAjaxSent = true;
   setTimeout(getLocationFromDb, 1000);
});

function getLocationFromDb( .... ) {
    if (!isAjaxSent) {
        //body of function
        // in ajax success function set isAjaxSent to false
    }
}

将多个keyup组合成单个事件以减少ajax请求的数量

2 个答案: