50

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

  $timeout(function() {

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

  }, 2000);
};

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

4

3 回答 3

64

在基本词汇中$timeout是指 angularjs 时setTimeout- 到 JavaScript。

如果您仍然想使用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…&quot;}}
</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 aka $scope.file = file_;

所以empty $timeout为我们完成了这项工作，它将触发摘要循环，并且$scope.file由 3d 方更新将在 GUI 中重新渲染

于 2013-10-26T17:41:29.010 回答
20
  1. 它会在 try/catch 块中自动为您包装您的回调，并让您处理 $exceptionHandler 服务中的错误：http: //docs.angularjs.org/api/ng.$exceptionHandler
  2. 它返回一个承诺，因此与传统的回调方法相比，它倾向于与其他基于承诺的代码更好地互操作。当您的回调返回时，返回的值用于解决承诺。
于 2013-10-26T17:41:42.870 回答
1

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

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

有关详细信息，请参阅

于 2018-08-02T22:26:53.393 回答