Question

我有一个页面，其中搜索结果显示在网格和地图上（使用动态生成的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秒延迟的最简单方法是什么？

Answer 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);

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

Answer 2

作为第一种方法，如下所示：

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

（不确定具体的setTimeout语法）。

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

Answer 3

您可以使用Window.SetTimeOut（YourRefreshMethod），当调用YourRefereshMethod时，它将检查到目前为止输入的字符数，并将其与某个计数器进行比较，计数器将以0值开始，因此初始调用除了用当前字符类型计数更新计数器之外什么都不会做，第二次调用你的方法时，它会检查键入的字符数，如果它与计数器记录的先前数字相匹配，则表示用户没有'输入任何新内容，您可以触发Refresh方法，否则您将更新计数器值

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

3 个答案: