javascript - JS AJAX typeahead 结果排序/竞争条件

Question

我遇到了 AJAX typeahead/live-update as-you-type View 的问题，这些 View 返回的结果乱序。有没有人有处理这个问题的方法的经验？

问题:

1. 输入查询，例如“搜索词”。
2. 即使有一些去抖动，它也可能会在您键入时触发一些 AJAX 调用，比如 "sea" , 和 "search term" .
3. sea 的搜索结果集大于 search term 的那个，因此它的 AJAX 请求实际上在较新的查询之后完成。
4. 由此产生的问题:您输入 search term , 但正确的结果在屏幕上闪过一秒钟，然后被 sea 的结果所取代。 .

基本的 jQuery 伪代码:

$('body').on('keyup', '#searchBox', function(){
    query = $("#searchBox").val();
    $.ajax({
        type: 'GET',
        url: '/endpoint.php?query=' + query,
        success: function (response) {
            // Update view here
            $("#view").html(response.text);
        }
   });
});

Angular 伪代码:

// HTML
<input ng-keyup = "search()" ng-model="searchBox" placeholder = "Search">
{{results}}

// JS
$scope.search = function(){
    $http({
        method: 'GET',
        url: '/endpoint.php?query=' + $scope.searchBox
        }).then(function successCallback(response) {
            $scope.results = response.data;
        }, function errorCallback(response) {
            console.log(response);
        });
}

Answer 1

顶部停止竞争条件，您可以保留对您发出的最后一个 AJAX 请求的引用，然后在按下新键时 abort() 它。在发出请求之前延迟也是值得的，这样您就不会为每个按下的键发送请求，而是在键入结束时发送请求。试试这个:

var previousRequest, previousTimer;

$('body').on('keyup', '#searchBox', function() {
    previousRequest && previousRequest.abort();
    clearTimeout(previousTimer);

    previousTimer = setTimeout(function() {
        previousRequest = $.ajax({
            type: 'GET',
            url: '/endpoint.php',
            data: { 
                query: $("#searchBox").val() 
            },
            success: function (response) {
                // Update view here
                $("#view").html(response.text);
            }
        });
   }, 200);
});

击键间隔 200 毫秒足够了，但如果您想提高请求的响应速度，可以缩短。