实现$ scope的延迟.$ watch

Question

我想知道是否有可能在$ scope上实施一点延迟.$ watch.我有以下查询服务器,所以我想在评估query服务器之前稍微延迟.我注意到如果你快速键入它会混淆并且不会发送正确的信息:

$scope.$watch("query", function () {
    $scope.loading = true;
    returnFactory.query($scope.query).then(function (returns) {
        $scope.returns = returns;
        $scope.loading = false;
    });
});

Answer 1

通常情况下我会说这个延迟使用angular的$ timeout,但你还是不能清除这个超时.

//编辑:你可以.

如果此观察者被快速触发,则设置超时并清除它.

像这样:

var timeoutCode;
var delayInMs = 2000;
$scope.$watch("query", function(query) {
 clearTimeout(timeoutCode);  //does nothing, if timeout alrdy done
 timeoutCode = setTimeout(function(){   //Set timeout
     $scope.loading = true;
     returnFactory.query(query).then(function(returns) {
       $scope.returns = returns;
       $scope.loading = false;
     });
 },delayInMs);
});

http://jsfiddle.net/4FuyY/

更新感谢stewie这可以通过angular的$ timeout来实现.

    var timeoutPromise;
    var delayInMs = 2000;
    $scope.$watch("query", function(query) {
     $timeout.cancel(timeoutPromise);  //does nothing, if timeout alrdy done
     timeoutPromise = $timeout(function(){   //Set timeout
         $scope.loading = true;
         returnFactory.query(query).then(function (returns) {
           $scope.returns = returns;
           $scope.loading = false;
         });
     },delayInMs);
    });

Answer 2

你可以使用ng-model-option,如果模型'query'是Html标签或Angular指令,对于Ej:

<input type ng-model="query" ng-model-options="{ updateOn: 'default blur', debounce: { 'default':
 2000, 'blur': 1 } }" />

你可以在这里看到Angular Doc:https://docs.angularjs.org/api/ng/directive/ngModelOptions

Answer 3

我喜欢使用Lo-Dash,它提供了两个非常有用的功能:debounce和throttle,它可以完全满足您的需求.假设你想确保它每150毫秒只调用一次函数:

function update() {
 $scope.loading = true;
    returnFactory.query($scope.query).then(function (returns) {
        $scope.returns = returns;
        $scope.loading = false;
    });
}

$scope.$watch("query", function () {
   _.throttle(update, 150);
});

该throttle功能可让您控制何时update调用函数(尾随或前沿).

我在我的应用程序中一直使用Lo-Dash.它对我来说是一个必备的库...比jQuery更有用.但是,如果您不想包含整个库,则可以创建Lo-Dash的自定义构建,其中仅包含throttle和debounce函数.