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

I have a page where search resuts are shown both in a grid and on a map (using KML generated on the fly, overlaid on an embedded Google map). I've wired this up to work as the user types; here's the skeleton of my code, which works:

我有一个页面,其中搜索结果显示在网格和地图上(使用在运行中生成的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
}

Depending on the search, there may be hundreds of results; and so the work that happens in displayResults is processor-intensive both on the server (querying the database, building and simplifying the KML on the fly) and on the client (databinding the results grid, overlaying big KML files on the map).

根据搜索,可能会有数百个结果;所以在displayResults中发生的工作在服务器上(查询数据库,动态构建和简化KML)和客户端(数据绑定结果网格,在地图上覆盖大型KML文件)都是处理器密集型的。

I like the immediacy of getting progressively narrower results as I type, but I'd like to minimize the number of times this refreshes. What's the simplest way to introduce an N-second delay after the user stops typing, before running the update function?

我喜欢在输入时逐渐缩小结果的即时性,但我想尽量减少刷新的次数。在运行更新功能之前,在用户停止输入后引入N秒延迟的最简单方法是什么?

3 个解决方案

#1

Instead of calling update() directly, call a wrapper that checks to see if there are any pending delayed updates:

而不是直接调用update(),而是调用一个包装器来检查是否有任何挂起的延迟更新:

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

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

    updatePending = setTimeout(update, 250);
}

function update() {
    updatePending = false;

    //$.ajax(...
}

You should also probably add:

您还应该添加:

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

This will do an immediate update when the user leaves the field. But make sure you also add handling for the case where the user leaves the field while there's a pending delayed update (cancel the delayed update first).

当用户离开该字段时,这将立即更新。但是,请确保在还有延迟更新(首先取消延迟更新)时,为用户离开字段的情况添加处理。

#2

As a first approach, what about something like :

作为第一种方法,如下所示:

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

(not sure about the exact setTimeout syntax).

(不确定确切的setTimeout语法)。

You can also keep a variable to track whether the timeout has already been scheduled or not.

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

#3

You can use Window.SetTimeOut(YourRefreshMethod) , when the YourRefereshMethod gets called, it will check number of characters being typed so far , and compare it to the some counter, the counter will starts with 0 value, so the initial call will do nothing other than updating the counter with the current characters typed count, the second time your method get called , it will check the number of characters typed, if it matches the previous number recorded by the counter , then it means the user didn't type anything new and you can fire your Refresh method, otherwise you will update the counter value

您可以使用Window.SetTimeOut(YourRefreshMethod),当调用YourRefereshMethod时,它将检查到目前为止输入的字符数,并将其与某个计数器进行比较,计数器将以0值开始,因此初始调用将不执行任何操作除了使用当前字符类型计数更新计数器之外,第二次调用方法时,它将检查键入的字符数,如果它与计数器记录的先前数字匹配,则表示用户未键入任何内容new,您可以触发Refresh方法,否则您将更新计数器值

#1