如何设置计时器以防止重叠 ajax 调用？答案

【问题标题】：How do I set up a timer to prevent overlapping ajax calls?如何设置计时器以防止重叠 ajax 调用？
【发布时间】：2010-09-17 03:41:54
【问题描述】：

我有一个页面，其中搜索结果显示在网格和地图上（使用动态生成的 KML，覆盖在嵌入式 Google 地图上）。我已经将它连接起来以在用户输入时工作；这是我的代码的骨架，它有效：

$(function() {
    // Wire up search textbox
    $('input.Search').bind("keyup", update);
});

update = function(e) {
    // Get text from search box
    // Pass to web method and bind to concessions grid
    $.ajax({  
        ...
        success: function(msg) {
            displayResults(msg, filterParams);
        },
    });

}

displayResults = function(msg, filterParams) {
        // Databind results grid using jTemplates
        // Show results on map: Pass parameters to KML generator and overlay on map
}

根据搜索的不同，可能会有数百个结果；因此，displayResults 中发生的工作在服务器（查询数据库，即时构建和简化 KML）和客户端（数据绑定结果网格，在地图上覆盖大 KML 文件）都是处理器密集型的.

我喜欢在键入时立即获得逐渐缩小的结果，但我想尽量减少刷新的次数。在用户停止输入之后，在运行 update 函数之前引入 N 秒延迟的最简单方法是什么？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

不要直接调用update()，而是调用一个包装器来检查是否有任何待处理的延迟更新：

$('input.Search').bind("keyup", delayedUpdate);

function delayedUpdate() {
    if (updatePending) {
        clearTimeout(updatePending);
    }

    updatePending = setTimeout(update, 250);
}

function update() {
    updatePending = false;

    //$.ajax(...
}

您还应该添加：

$('input.Search').bind("blur", update);

这将在用户离开该字段时立即更新。但请确保您还添加了针对用户离开该字段而等待延迟更新（首先取消延迟更新）的情况的处理。

【讨论】：

【解决方案2】：

作为第一种方法，例如：

$('input.Search').bind("keyup", function() { setTimeout(update, 5) } );

（不确定确切的 setTimeout 语法）。

您还可以保留一个变量来跟踪是否已经安排了超时。

【讨论】：

在等待 5 毫秒后，这将有效地产生相同数量的不必要负载。

【解决方案3】：

您可以使用 Window.SetTimeOut(YourRefreshMethod) ，当 YourRefereshMethod 被调用时，它会检查到目前为止输入的字符数，并将其与某个计数器进行比较，计数器将从 0 值开始，所以初始调用除了用当前输入的字符数更新计数器外，第二次调用您的方法时，它将检查输入的字符数，如果它与计数器记录的先前数字匹配，则表示用户没有t 键入任何新内容，您可以触发 Refresh 方法，否则您将更新计数器值

【讨论】：