このようなタイムアウトを実装する提案がありました。
$timeout(function() {
// Loadind done here - Show message for 3 more seconds.
$timeout(function() {
$scope.showMessage = false;
}, 3000);
}, 2000);
};
どなたか、setTimeoutではなくこれを使う理由・利点を教えてください。
基本的には、$timeout
は angularjs を指し、setTimeout
は JavaScript を指します。
それでも setTimeout
を使いたい場合は、次のように $scope.$apply()
を呼び出す必要があります。
*余談ですが
jQuery出身者がAngularJSで考えるには]1の記事をご覧ください。
とAngularJS: setTimeoutではなく$timeoutを使う
$scope.timeInMs = 0;
var countUp = function() {
$scope.timeInMs+= 500;
$timeout(countUp, 500);
}
$timeout(countUp, 500);
$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][3]
JS
function promiseCtrl($scope, $timeout) {
$scope.result = $timeout(function({
return "Ready!";
}, 1000);
}
HTML
<div ng-controller="promiseCtrl">
{{result || "Preparing…"}}
</div>
Cloudinaryプラグインのような3dパーティのコード(AngularJSではない)があり、ファイルをアップロードして 'progress'のパーセンテージをコールバックで返すとします。
// .....
.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_;
とします。
これは、ダイジェストサイクルのトリガーとなり、3dパーティによって更新された $scope.file
がGUIに再レンダリングされます。
AngularJSは、独自のイベント処理ループを提供することで、通常のJavaScriptの流れを変更します。これにより、JavaScriptは古典的な実行コンテキストとAngularJSの実行コンテキストに分割されます。AngularJSの実行コンテキストで適用される操作のみが、AngularJSのデータバインディング、例外処理、プロパティウォッチングなどの恩恵を受けます。
AngularJSの$timeoutサービスを使うことで、ラップされたsetTimeout
はAngularJSの実行コンテキストで実行されます。
詳細については