带有ajax调用顺序的Javascript自动完成

Question

我有像这样的 Javascript 简单的自动完成输入字段：

$('#search').on('keyup', function () {
    var query = $(this).val();
    $.ajax({
        type: "GET",
        url: "/search",
        data: { query: query }
    }).done(function (results) {
        showSearchResults(results);
    });
});

有时，第一次调用比第二次或第三次调用需要更多时间，并且结果会被覆盖。

如何确保仅显示最近成功调用的结果？

我的意思是，如果我收到来自呼叫 #3 的响应 - 我不再关心呼叫 #1 和 #2 并且不希望它们覆盖呼叫 #3 的结果。

Answer 1

Ajax 函数默认是异步的，这意味着许多函数可以同时运行。 如果你写了 3 个字母，它会在 3 次按键后运行 3 次。 如果您想按顺序运行函数，只需添加设置 async: false。

$.ajax({
    type: "GET",
    url: "/search",
    async: false,
    data: { query: query }
}).done(function (results) {
    showSearchResults(results);
});

但我认为你应该添加一些延迟，所以功能不会在每次按键后立即运行，就在最后一个之后。

Answer 2

我建议您将增量 id 绑定到您发送的每个 ajax 请求。 当您收到回复时，只需检查它是否带有最后给定的 ID。

let lastXHRid=0; // tracker of last sent ajax request

$('#search').on('keyup', function () {
    let reqXHR = $.ajax({ // create a variable out of $.ajax returned value
        type: "GET",
        url: "/search",
        data: { query: $(this).val() }
    });

    lastXHRid++; // increment the XHR counter
    reqXHR.id = lastXHRid; // attach id to the request

    reqXHR.done(function(results, status, respXHR) {
        if ( respXHR.id == lastXHRid ){ // compare id of received and last sent requests
            showSearchResults(results);
        }
    });
});

（编辑：我最初建议跟踪上次发送请求的 unix 时间戳，但正如@seth-battis 在评论中建议的那样，序列号就足够了。作为奖励，我还调试了我的示例代码段！）