Question

我有简单的自动完成输入字段，如下所示：

$('#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

我建议您记录每个请求的Unix时间，并在得到响应时将其与上次记录的时间进行比较。

    let lastXHRtime; // tracker of last recorded time

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

        lastXHRtime = (new Date()).getTime(); // update unix time of last request
        reqXHR.time = lastXHR;                // record unix time of this request

        .done(function(results, status, respXHR) {
            if ( respXHR.time == lastXHRtime ){ // compare unix time of received and last sent requests
                showSearchResults(results);
            }
        });
    });

使用ajax调用顺序的Javascript自动完成功能

2 个答案: