What advantage is there in using the $timeout in AngularJS instead of window.setTimeout?
AngularjsSettimeoutAngularjs Problem Overview
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?
Angularjs Solutions
Solution 1 - Angularjs
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
Solution 2 - Angularjs
- It wraps your callback for you automatically in a try/catch block and let's you handle errors in the $exceptionHandler service: http://docs.angularjs.org/api/ng.$exceptionHandler
- It returns a promise and thus tends to interoperate better with other promise-based code than the traditional callback approach. When your callback returns, the value returned is used to resolved the promise.
Solution 3 - Angularjs
AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.
By using the AngularJS $timeout service, the wrapped setTimeout will be executed in the AngularJS execution context.
For more information, see