javascript - 使用 $timeout 限制在 Angularjs 1.2 搜索应用程序中发出的 http 请求量

Question

我正在做一个提前输入样式的表单，它有一个 findSearchValue 的 ng-model，当用户输入输入时我会看到它，当它更新时我会触发搜索功能。我遇到的问题是，当用户键入一个词(例如 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

听起来你想要 debounce .您应该删除额外的 $timeout 代码并执行以下操作:

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

在元素上。

编辑:正如下面评论中提到的，上面需要 Angularjs 1.3。如果您需要去抖动但无法升级您的 angularjs 安装，请尝试这样的操作:github.com/shahata/angular-debounce