angularjs - 在$ 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);
    });