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

Question

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

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

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

Answer 1

基本而言，$timeout指的是 angularjs 当setTimeout - JavaScript 时。

如果您仍然想使用setTimeout因此您需要在之后调用$scope.$apply()

作为旁注

我建议你阅读 如果我有jQuery背景，我如何"思考AngularJS"？

和 AngularJS：使用 $timeout，而不是 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);

演示小提琴

<小时 />

$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插件，它上传一些文件并返回我们的"进度"百分比率回调。

     // .....
     .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);         
            })

我们想更新我们的 UI 又名 $scope.file = file_;

因此，空$timeout为我们完成了这项工作，它将触发摘要周期，并且由 3d 方更新$scope.file将在 GUI 中重新渲染

Answer 2

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

Answer 3

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

通过使用 AngularJS

$timeout 服务，包装后的setTimeout将在 AngularJS 执行上下文中执行。

有关详细信息，请参阅

• AngularJS $timeout Service API 参考
• AngularJS 开发指南 -与浏览器事件循环集成