使用$ 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();
  }
});