使用$ timeout來限制Angularjs 1.2搜索應用程序中出現的http請求數量

Question

我正在做一個類型提前的樣式表單，它有一個ng-model的findSearchValue ，當用戶鍵入輸入時我會看到它，當它更新時我會觸發搜索功能。 我遇到的問題是當用戶鍵入一個單詞（例如Spaceship ）時，該函數會觸發9個對Spaceship的請求; 單詞中的每個字母為1。

我嘗試使用超時，但所有這一切都是等待900毫秒，然后觸發所有9個請求。 什么可以確保只有在用戶停止輸入指定時間后才會觸發請求。

這是我目前的代碼：

$scope.findSearchValue = '';

$scope.getFindResults = function(findSearchValue) {
  if ($scope.findSearchValue.length > 2) {
    $timeout(function(){
      $http.get('/search.json?term=' + $scope.findSearchValue).success(function(data) {
        $scope.findResults = data;
        $scope.showSearchResults = true;
      });
    }, 900);
  } else {
    $scope.showSearchResults = false;
  }
};

$scope.$watch('findSearchValue',  function(newValue, oldValue) {
  if (newValue !== oldValue) {
    $scope.getFindResults();
  }
});

另外，我知道有很多指令可以處理這個用例。 我不想安裝一個大型指令只是為了做一些如此小的事情。 謝謝

Answer 1

聽起來你想要去抖動 。 你應該刪除額外的$timeout代碼，然后執行：

ng-model-options="{ debounce: 900 }"

在元素上。

編輯 ：如下面評論中所述，上述要求Angularjs 1.3。 如果您需要去抖但無法升級您的angularjs安裝，請嘗試以下方法： github.com/shahata/angular-debounce

Answer 2

存儲舊的超時承諾，並在每次發生新的更改時取消它。 關鍵是要使用$timeout.cancel(promise) 。 $timeout()返回promise 。 使用您的代碼（未經測試）：

$scope.findSearchValue = '';

var promise = null;
$scope.getFindResults = function(findSearchValue) {
  if ($scope.findSearchValue.length > 2) {
    if (promise) {
      $timeout.cancel(promise);
    }
    promise = $timeout(function(){
      $http.get('/search.json?term=' + $scope.findSearchValue).success(function(data) {
        $scope.findResults = data;
        $scope.showSearchResults = true;
      });
    }, 900);
  } else {
    $scope.showSearchResults = false;
  }
};

$scope.$watch('findSearchValue',  function(newValue, oldValue) {
  if (newValue !== oldValue) {
    $scope.getFindResults();
  }
});