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 も promise を返します

JS

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

HTML

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

$timeout もダイジェスト サイクルをトリガーします

Cloudinary プラグインのような (AngularJS ではない) サード パーティ コードがあり、ファイルをアップロードして「進行状況」パーセンテージ レート コールバックを返すとします。

     // .....
     .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たちのために仕事をするので、それはダイジェストサイクルをトリガー$scope.fileし、3D パーティによって更新され、GUI で再レンダリングされます

于 2013-10-26T17:41:29.010 に答える
20
  1. コールバックを自動的に try/catch ブロックにラップし、$exceptionHandler サービスでエラーを処理できるようにします: http://docs.angularjs.org/api/ng.$exceptionHandler
  2. これは promise を返すため、従来のコールバック アプローチよりも他の promise ベースのコードとの相互運用性が高くなる傾向があります。コールバックが返されると、返された値が promise の解決に使用されます。
于 2013-10-26T17:41:42.870 に答える