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

我有一个页面，其中搜索结果显示在网格和地图上（使用KML生成，覆盖在嵌入的Google地图上）。我已经通过用户输入来连接它，这是我的代码的骨架，它的工作原理：如何设置一个计时器以防止重叠ajax调用？

$(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秒延迟的最简单方法是什么？

来源

2008-10-14 Herb Caudill

而不是直接调用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);

这将做一个即时更新。但是请确保您还为在用户离开现场时发生挂起延迟更新（首先取消延迟更新）的情况添加处理。

来源

2008-10-14 17:33:08

这很好用 - 谢谢。 – 2008-10-14 18:32:14

作为第一种方法，有关的东西像什么：

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

（不知道确切的setTimeout语法）。

您还可以保留一个变量来跟踪超时是否已经计划好。

来源

2008-10-14 17:27:52

这会在等待5毫秒后有效地产生相同数量的不必要负载。 – 2008-10-14 17:30:28

可以使用Window.SetTimeOut（YourRefreshMethod），当YourRefereshMethod被调用时，它会检查到目前为止输入的字符数量，并将它与某个计数器进行比较，计数器将从0开始，所以初始值除了使用当前键入的字符数更新计数器，第二次调用方法时，它将检查输入的字符数，如果它与计数器记录的前一个数相匹配，则表示用户没有做任何事情不输入任何新东西，你可以启动你的刷新方法，否则你将更新计数器值

来源

2008-10-14 17:30:32

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

回答

相关问题