JS AJAX typeahead result ordering/race состояние

Question

У меня возникла проблема с AJAX typeahead/live-update по мере вашего появления, которые возвращают результаты не по порядку. Есть ли у кого-нибудь опыт в методах борьбы с этим?

Проблема:

1. Введите запрос, например "поиск по ключевому слову".
2. Даже с некоторым debouncing, вероятно, сработает несколько вызовов 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); 
     } 
    }); 
}); 

Угловая псевдокод:

// 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

Top остановить состояние гонки вы можете сохранить ссылку на последний запрос 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мс между нажатиями много, но вы можете сократить, если вы хотите, чтобы повысить оперативность запросов.