javascript - 识别最新的 api 调用响应并忽略旧的调用响应

Question

我在一个搜索页面上工作，用户在搜索输入文本框中输入文本，它使用输入框文本为每个字符更新和更新 UI 进行 ajax 调用。但我在识别上次 API 调用响应时遇到了问题。假设，用户键入“ABC”，它正在调用三个 API，

1. 'A'
2. 'AB'
3. 'ABC'

我收到的响应顺序为 2、3、1。最后，UI 的结果是“A”搜索文本而不是“ABC”

不建议我使用 promise/async 方法来解决这个问题，也不能在 API 调用中进行任何服务器端更改。

$.ajax({
    url: "search_api",
    success: function(){
    // update UI
    }
});

Answer 1

首先，每当对输入文本框进行更改时，您应该立即清空包含搜索结果的区域，作为进行 AJAX 调用的前奏。 AJAX 响应应包括原始搜索参数，如果该搜索参数当前不在输入文本框中，则应丢弃该响应。这样，返回响应的顺序应该是无关紧要的。在输出搜索结果时，应禁用输入文本框，以确保输入文本框和搜索结果始终保持同步。在字典中缓存以前的 AJAX 调用，字典的键是搜索参数，值是相应的搜索结果，当然可以避免进行额外的 AJAX 调用。

当您无法控制 API 调用的规范并且不可能使用原始搜索参数标记响应时，将需要采取严厉措施:

首先，这甚至适用于可以使用原始搜索参数标记响应的原始最佳情况，您不应该进行 API 调用，直到一段时间内没有击键事件(例如半秒)。所以，如果用户是一个快速打字员，你应该等到打字有一些停顿。否则，当响应返回时，它可能不再有效。在这种无法在响应中返回原始搜索参数的特殊情况下，您将别无选择，只能进行调用，然后在当前 AJAX 调用完成时推迟任何其他请求。这样一来，永远不会有超过一个未完成的 AJAX 调用。当前调用完成后，结果可能不再相关，因为输入文本框已更改，您将需要执行另一个 API 调用。您应该等待的键盘不活动持续时间取决于系统对 AJAX 调用的响应速度:系统响应速度越快，您就可以缩短暂停时间。

我越想越觉得，没有理由不能将以任意顺序返回的多个异步响应与原始请求联系起来。下面是一个使用 jQuery 的例子。我编写了一个回显服务器 test4.py，它使用变量 x 发布并简单地回显该值。函数 make_request 被传递给参数 x 并使用 jQuery 将其发布到回显服务器。当异步响应进来时，它能够通过对 ajax 调用创建的请求对象上的 done 方法的回调参数使用函数闭包将其绑定(bind)回原始请求参数:

function makeRequest(x) {
    var req = jQuery.ajax({
        'method': 'POST',
        'url': 'http://localhost/ron/test/test4.py',
        'data': {x: x}
        });
    req.done(function(msg) {
        console.log(msg +',' + x);
    });
}

指定给done 方法的回调函数只记录从回显服务器返回的消息和原始x 参数。为了启动文档就绪事件，我们有:

$(function() {
    for (let x = 0; x < 5; x++) {
        makeRequest(x);
    }
});

检查日志显示:

test2.html:16 4,4
test2.html:16 3,3
test2.html:16 1,1
test2.html:16 2,2
test2.html:16 0,0