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

Posted 2023-05-07

【中文标题】如何设置计时器以防止重叠 ajax 调用？

【英文标题】：How do I set up a timer to prevent overlapping ajax calls?

【发布时间】：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 秒延迟的最简单方法是什么？

【参考方案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 方法，否则您将更新计数器值