javascript - AngularJS:带去抖动的 $watch

Question

我有以下代表搜索字段的 html:

<input ng-model-options="{ debounce: 500 }" type="text" ng-model="name">

以及以下js:

$scope.$watch('name', function(newVal, oldVal) {
            if(newVal != oldVal) {
                $scope.pageChanged($scope.sort, $scope.name, $scope.sortDirection);
            }
        });

现在，我的 pageChanged 函数对我的服务器进行 REST 调用，并返回基于排序和搜索信息(“名称”)的实体列表。假设我的用户想要搜索“Tom”。我想避免我的应用程序进行三个休息调用 (name="T", name="To", name="Tom")。

我尝试使用 debounce 来执行此操作，但 watch 似乎无法使用 debounce，所以我想知道用最少的代码实现它的最佳方法是什么？

Answer 1

你应该为这类事情使用 ng-change 而不是连接 watch 。

<input ng-model-options="{ debounce: 500 }" type="text" ng-model="name" ng-change="modelChanged()">

JS:

var timeout = $timeout(function(){});

$scope.modelChanged = function(){
    $timeout.cancel(timeout); //cancel the last timeout
    timeout = $timeout(function(){
        $scope.pageChanged($scope.sort, $scope.name, $scope.sortDirection);
    }, 500);
};

我不熟悉 debounce，但它可能会达到同样的效果。