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

Question

我有一个页面，其中搜索结果同时显示在网格和 map 上(使用即时生成的 KML，覆盖在嵌入式 Google map 上)。我已将其连接起来以在用户输入时工作；这是我的代码的框架，可以正常工作:

$(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)和客户端(数据绑定(bind)结果网格、覆盖大 KML)上都是处理器密集型的 map 上的文件)。

我喜欢在键入时获得逐渐缩小结果的即时性，但我想尽量减少刷新次数。在用户停止输入后、运行 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);

这将在用户离开该字段时立即更新。但请确保您还添加了对用户离开字段的情况的处理，同时存在未决的延迟更新(首先取消延迟更新)。