キーアップ時のAngularJS HTTP GETリクエストで最新のデータセットが返されない場合があります

Question

私は、keyupイベントで次の関数を実行する小さなアプリケーションを作成しています唯一の問題はimを入力してから最後のキーを押すと、約束は、私が持っている配列からすべてのデータを削除し、新しいデータを挿入します。

私は、次の

要求1ない場合は言う - 2 150msの 要求 - が80ms

は、その後1は、すべての要求2つの値を削除したデータは最新のものではありませんので、要求1つの値を挿入要求？最後にキーを押し:(

誰もこれを回避する方法を知っています私のコードは以下の通りです:)

に従ってJavascriptを：

app.controller('FlagsController', function ($scope, $http, $location, $window, $timeout) { 

$scope.Products = [] 

$scope.GetRecords = function() { 
    try { 
     console.log('Get Records') 
     // Simple GET request example with promise: To get FeatureRelations 
     $http({ 
      method: 'GET', 
      url: 'GetFeatureRelations.ashx?SearchQuery=' + $scope.SearchTerm 
     }).then(function (res) { 
      $scope.Products = [] 
      for (var i = 0; i < res.data.length; i++) { 
       $scope.Products.push(res.data[i]) 
      } 
      $scope.busy = false 
      $scope.showLoader = false 
     }, function (error) { 
      console.error(JSON.stringify(error)) 
      $scope.busy = false 
      $scope.showLoader = false 
     }) 
    } 
    catch (ex) { 
     console.error("Error: " + ex.toString()) 
    } 
} 
}) 

HTML：

<input type="search" ng-keyup="GetRecords()" class="form-control" style="width: 30%" ng-model="SearchTerm" placeholder="Search Product Code, Name or Brand..."> 

Answer 1

あなたはメソッドが再び呼び出されるたびに、前の$http要求をキャンセルすることができます。 $qを注入し、キャンセラ約束を作成する。

var canceler; 
$scope.GetRecords = function() { 
    try { 
     if (canceler) { 
      canceler.resolve(); 
     } 
     console.log('Get Records') 
     // Simple GET request example with promise: To get FeatureRelations 
     canceler = $q.defer(); 
     $http({ 
      method: 'GET', 
      url: 'GetFeatureRelations.ashx?SearchQuery=' + $scope.SearchTerm, 
      timeout: canceler.promise 
     }) 
//...