Question

我有text box输入一些文字来搜索记录。我正在使用data-ng-model-options="{ debounce: 1000 }"与keyup事件，data-ng-model-options"正常工作，但我希望在keyup时间段后触发debounce事件。目前keyup事件会在debounce duration之前立即触发。可能是我做错了。

这是我的HTML

<input type="text" id="focusOnMe" placeholder="Search..."/ data-ng-keyup="loadSearchResult($event)" data-ng-model="searchText" ng-model-options="{ debounce: 1000 }">

这是我的Keyup event行动

$scope.loadSearchResult = function(event) {
  $rootScope.hideSearchResult = true;
  $rootScope.showLoading = true;
  var searchText = $scope.searchText.trim();
  if (searchText.length > 0) {
    $http({
      method: 'POST',
      url: '/secure/search',
      data: {
        searchText: searchText,
        peopleFlag: checkboxValueForPeopleSearch,
        colonyFlag: checkboxValueForColonySearch
      }
    }).success(function(data) {
      console.log(data);
      if (data !== undefined || data !== null) {
        $timeout(function() {
          $rootScope.hideSearchResult = false;
          $rootScope.showLoading = false;

          $scope.allSearchResult = {
            "bookmarks": data.bookmarks,
            "people": data.people,
            "colonies": data.colonies
          };
        }, 300);
      } else {
        $rootScope.showLoading = false;
        commonNotification($rootScope, false, true, true, 'something went wrong!');
        $timeout(function() {
          $rootScope.newStatus = false;

        }, 2000);
      }

    }).error(function(err) {

    });
  } else {
    $rootScope.hideSearchResult = true;
    $rootScope.showLoading = false;
  }

};

很抱歉，代码依赖于更多文件，因此我没有plunker示例

任何建议对我都有帮助。

谢谢

Answer 1

去抖动不会影响keyup事件。它只会延迟模型（$ scope）变量的赋值。因此，您的keyup事件会立即触发，loadSearchResult会在您希望之前运行。

要解决此问题，您可以添加一个绑定到$ scope.searchText的手表。

$scope.$watch('searchText', function (newValue) {
  loadSearchResult(newValue);
});

超级简单且干净利落，因为我们使用的是Single Source of Truth（$ scope）。

注意：我省略了事件对象，因为你没有使用它。

Answer 2

在ng-model-options中指定debounce后，它将改变模型更新的方式。但它不会改变关键事件的工作方式。对于您的情况，使用_.debounce会有所帮助： var delay = 500; $scope.loadSearchResult = _.debounce($scope.loadSearchResult, delay);

debounce不适用于Angular中的keyup事件

2 个答案: