在 AngularJS 中使用 $timeout 而不是 window.setTimeout 有什么好处? [英] What advantage is there in using the $timeout in AngularJS instead of window.setTimeout?

问题描述

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

 $timeout(function() {//在此处加载完成 - 再显示 3 秒消息.$超时(功能(){$scope.showMessage = false;}, 3000);}, 2000);};

谁能告诉我使用它而不是使用 setTimeout 的原因/优势是什么?

解决方案

基本的话 $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 = 函数(){$scope.timeInMs_old+= 500;设置超时(函数(){$scope.$apply(countUp_old);}, 500);}设置超时(函数(){$scope.$apply(countUp_old);}, 500);

演示 小提琴

---

$timeout 也返回一个 promise

JS

function promiseCtrl($scope, $timeout) {$scope.result = $timeout(function({返回准备好了！"；}, 1000);}

HTML

{{结果 ||正在准备……"}}

---

$timeout 也会触发摘要循环

考虑我们有一些 3d 方代码(不是 AngularJS)，比如 Cloudinary 插件，它上传一些文件并返回进度"百分比回调.

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

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

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

I had a suggestion to implement a timeout like this:

  $timeout(function() {

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

  }, 2000);
};

Can someone tell me what is the reason / advantage in using this rather than using setTimeout?

解决方案

In basic words $timeout refers to angularjs when setTimeout - to JavaScript.

If you still think to use setTimeout therefore you need invoke $scope.$apply() after

As a side note

I suggest you to read How do I "think in AngularJS" if I have a jQuery background? post

and AngularJS: use $timeout, not setTimeout

Example 1: $timeout

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

---

Example 2: setTimeout (same logic)

 $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);

Demo Fiddle

---

$timeout also returns a promise

JS

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

HTML

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

---

$timeout also trigger digest cycle

Consider we have some 3d party code (not AngularJS) like Cloudinary plugin that uploads some file and returns us 'progress' percentage rate callback.

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

We want to update our UI aka $scope.file = file_;

So empty $timeout does the job for us, it will trigger digest cycle and $scope.file updated by 3d party will be re-rendered in GUI

这篇关于在 AngularJS 中使用 $timeout 而不是 window.setTimeout 有什么好处?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！