Question

我有建议实现这样的超时：

  $timeout(function() {

    // Loadind done here - Show message for 3 more seconds.
    $timeout(function() {
      $scope.showMessage = false;
    }, 3000);

  }, 2000);
};

有人可以告诉我使用它而不是使用setTimeout的原因/优势是什么？

Answer 1

基本单词$timeout指的是setTimeout时对于JavaScript的angularjs。

如果您仍然认为使用setTimeout，则需要在

之后调用$scope.$apply()

作为旁注

我建议你阅读 How do I “think in AngularJS” if I have a jQuery background? 帖子

和 AngularJS: use $timeout, not setTimeout

示例1：$ timeout

   $scope.timeInMs = 0;

    var countUp = function() {
        $scope.timeInMs+= 500;
        $timeout(countUp, 500);
    }    
    $timeout(countUp, 500);

示例2：setTimeout（相同逻辑）

 $scope.timeInMs_old = 0;

    var countUp_old = function() {
        $scope.timeInMs_old+= 500;        
        setTimeout(function () {
        $scope.$apply(countUp_old);
    }, 500);
    }

    setTimeout(function () {
        $scope.$apply(countUp_old);
    }, 500);

演示 Fiddle

$ timeout也会返回一个承诺

JS

function promiseCtrl($scope, $timeout) { 
 $scope.result = $timeout(function({ 
 return "Ready!"; 
 }, 1000); 
}

HTML 的

<div ng-controller="promiseCtrl"> 
 {{result || "Preparing…"}}
</div>

$ timeout也会触发摘要周期

考虑我们有一些3D派对代码（不是AngularJS），比如Cloudinary插件，它会上传一些文件并返回'progress'百分率回调。

     // .....
     .on("cloudinaryprogress",
           function (e, data) {
               var name = data.files[0].name;
               var file_ = $scope.file || {};
               file_.progress = Math.round((data.loaded * 100.0) / data.total);


                $timeout(function(){
                     $scope.file = file_;
                }, 0);         
            })

我们想要更新我们的用户界面$scope.file = file_;

所以空 $timeout为我们完成工作，它会触发摘要周期，3d party更新的$scope.file将在GUI中重新呈现

Answer 2

它会在try / catch块中自动包装你的回调，让你在$ exceptionHandler服务中处理错误：http://docs.angularjs.org/api/ng.$exceptionHandler
它返回一个promise，因此与传统的回调方法相比，它可以更好地与其他基于promise的代码进行互操作。当您的回调返回时，返回的值用于解决承诺。

Answer 3

AngularJS通过提供自己的事件处理循环来修改常规JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

通过使用AngularJS $ timeout服务，将在AngularJS执行上下文中执行包装的setTimeout。

有关更多信息，请参见

在AngularJS中使用$ timeout而不是window.setTimeout有什么好处？

3 个答案:

示例1：$ timeout

示例2：setTimeout（相同逻辑）

$ timeout也会返回一个承诺

$ timeout也会触发摘要周期