web-dev-qa-db-ja.com

window.setTimeoutの代わりにAngularJSで$ timeoutを使用する利点は何ですか？

このようなタイムアウトを実装する提案がありました：

  $timeout(function() {

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

  }, 2000);
};

誰かがsetTimeoutを使用するのではなくこれを使用する理由/利点は何ですか？

angularjssettimeout
50
Samantha J T Star

基本的な言葉で_$timeout_はsetTimeout-JavaScriptのときのanglejsを指します。

それでも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もダイジェストサイクルをトリガーします

Cloudinaryプラグインのような（AngularJSではなく）いくつかのファイルをアップロードし、「進行中の」パーセンテージレートのコールバックを返す3dパーティコードがあると考えてください。

_     // .....
     .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_;_）を更新したい

したがって、empty_$timeout_は私たちのために仕事をし、ダイジェストサイクルをトリガーし、3Dパーティによって更新された_$scope.file_はGUIで再レンダリングされます

64
Maxim Shoustin
  1. Try/catchブロックでコールバックを自動的にラップし、$ exceptionHandlerサービスでエラーを処理できます。 http://docs.angularjs.org/api/ng.$exceptionHandler
  2. Promiseを返すため、従来のコールバックアプローチよりも他のpromiseベースのコードとの相互運用性が向上する傾向があります。コールバックが返されると、返された値がプロミスの解決に使用されます。
20
ksimons

AngularJSは、独自のイベント処理ループを提供することにより、通常のJavaScriptフローを変更します。これにより、JavaScriptは従来の実行コンテキストとAngularJS実行コンテキストに分割されます。 AngularJS実行コンテキストで適用される操作のみが、AngularJSデータバインディング、例外処理、プロパティ監視などの恩恵を受けます。

AngularJS $ timeoutサービスを使用すると、ラップされたsetTimeoutがAngularJS実行コンテキストで実行されます。

詳細については、

1
georgeawg