Isetty Ravitejakumar Isetty Ravitejakumar - 3 months ago 15
AngularJS Question

difference between setTimeout in javascript and $timeout service in angularjs

Iam new to angular framework.Here is my scenario where, I want to change my $scope.variable after a period of time so i used javascript

setTimeout
method.

$scope.variable='Previous';

setTimeout(function(){
$scope.variable='NEXT';
},3000);


This code doesn't worked for me. I used
$apply()
to make this code work.

Later i came to know that angular itself has a $timeout service which does the same work.

$scope.variable='Previous';
$timeout(function () {
$scope.variable='NEXT';
}, 2000);


How can i compare performance of
$timeout
service with javascript
setTimeout
??

Why we should use
$timeout
instead of
setTimeout
??

Please give me some examples and reasons to use it, which shows the performance.

Thanks :)

Answer

Any AngularJS scope variable when handled from outside (including ajax) needs a $apply().

$timeout() takes care of the current scope and runs in the same digest cycle.

One beauty of $timeout() that I recently discovered is, if you do not pass the time parameter, it will wait for the DOM completion.

So,

$timeout(function(){
  console.log("show after directive partial loaded")
}); //note, no time parameter

Run this code in a directive and the timeout callback function will be fired once the partial has been loaded by the directive

Hope this helps.