angularjs - 在 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()

作为旁注

我建议您阅读 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 也返回一个 promise

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 中重新渲染