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

Question

I'm working on a search page where the user enters text in a search input textbox and it makes an ajax call with the input box text for each and every character update and updates the UI. but I'm facing a problem in identifying last API call response. suppose, user types 'ABC' and it's making three API calls for,

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

I'm getting responses in the order of 2,3,1. finally, UI is having results for 'A' search text instead of 'ABC'

I'm not advised to use promise/async methods to resolve this issue and also cant not make any serverside changes in API call.

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

Answer 1

First, whenever a change is made to the input text box, you should immediately empty the area holding the search results as a prelude to making the AJAX call. The AJAX response should include the original search argument and if that search argument is not currently in the input text box, the response should be thrown away. In that way the order in which the responses are returned should be irrelevant. While you are outputting the search results, you should disable the input text box to ensure that the input text box and search results are always in sync. Caching previous AJAX calls in a dictionary whose key is the search argument and the value are the corresponding search results will, of course, save you from making extra AJAX calls.

When you have no control over the specs for the API call and it is impossible to have the response tagged with the original search argument, drastic measures will need to be taken:

First, and this applies to even the original best-case scenario where the response can be tagged with the original search argument, you should not be making the API call until there has been no keystroke activity for some amount of time (eg a half second). So, if the user is a fast typist, you should be waiting until there is some pause in the typing. Otherwise, by time the response comes back it will probably no longer be valid. In this particular case where the original search argument cannot be returned in the response, you will have no choice but to make the call but then postpone any other requests for when the current AJAX call completes. In that way, there is never more than one outstanding AJAX call. When the current call completes, there is a possibility that the results are no longer relevant because the input text box has changed and you will need to do a another API call. The duration of keyboard inactivity you should be waiting for will depend on how fast the system responds to the AJAX call: You can get away with shorter pauses the faster the system responds.

The more I think about this, there is no reason why you shouldn't be able to tie your multiple asynchronous responses that are returned back in arbitrary order to the original request. Here is an example using jQuery. I wrote an echo server, test4.py , that is posted with a variable x and simply echoes the value back. Function make_request is passed argument x and posts this using jQuery to the echo server. When the asynchronous response comes in, it is able to tie it back to the original request argument by using a function closure for the callback argument to the done method on the request object created by the ajax call:

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

The callback function specified to the done method just logs the returned message from the echo server and the original x argument. To kick things off on the document ready event, we have:

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

And an examination of the log shows:

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