CODEWITHSUNDEEP
javascriptangularjssetinterval
Basit Munir
Basit Munir

Reputation: 438

window.setInterval() does no work properly in angular.js

i used setInterval() function in angular.js controller to show timer on UI later. create a scope variable which have value of inactivity in seconds.

setInterval(function(){ scope.timer++ }, 1000);

what it suppose to do is, it should update screen every second. but it doesn't. some time it update screen after two seconds, three seconds and sometime it update it every seconds, but its not consistent. while when I log scope. timer value it behaves properly.

what would be the problem of this. Does angular.js restrict native javascript somehow or what? enter image description here

Upvotes: 1

Views: 1376

Answers (7)

Bamieh
Bamieh

Reputation: 10906

setInterval is not an angular function, hence the scope is not refreshed, I DO NOT RECOMMEND using scope.$apply() as its wasteful.

use angular's inbuilt $interval method:

.controller('ExampleController', ['$scope', '$interval',
  function($scope, $interval) {
      stop = $interval(function() {
          $scope.timer++;
      }, 1000);
});

documentation: https://docs.angularjs.org/api/ng/service/$interval

Upvotes: 0

Karim
Karim

Reputation: 8632

setInterval is a JS native function, to execute it inside the digest loop you should call the apply() method or alternatively use the wrapper $interval as suggested in the AngularJS doc.

$interval(function(){ scope.timer++ }, 1000);

https://docs.angularjs.org/api/ng/service/$interval

Upvotes: 0

Maciej Sikora
Maciej Sikora

Reputation: 20132

Use scope.$apply

setInterval(function(){ scope.timer++; scope.$apply(); }, 1000);

setInterval is not angular function so scope is not refreshing.

Or use angular service ( prefered solution ):

$interval(function(){ scope.timer++;},1000);

Upvotes: 0

CapitanFindus
CapitanFindus

Reputation: 1526

You could try using Angular's $interval, from the docs

You have to add it to your controller and use it, like this ( view Plunker )

app.controller('testController', ['$scope', '$interval', function($scope, $interval) {
  var count = 1;
  $scope.count = count;
  $interval(function() {
    $scope.count++;
  }, 1000);
}]);

Upvotes: 0

Antipod
Antipod

Reputation: 1643

Better is to use $interval, example:

var app = angular.module('MyApp', []);

app.controller('AppCtrl', function($scope, $interval) {
    $scope.timer = 0;
    $interval(function() { $scope.timer++; }, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
    <div ng-bind="timer"></div>
</div>

Upvotes: 1

Weedoze
Weedoze

Reputation: 13943

You should use $interval

Update your code to this

$interval(function(){
    $scope.timer++;
}, 1000)

Make sure that your $scope.timer is correctly initialized

Upvotes: 0

Syam Pillai
Syam Pillai

Reputation: 5217

May be the value is updating in the controller but not in the DOM try this

JS

setInterval(function(){ 
 scope.timer++ 
 setTimeout(function(){
   $scope.$apply();
 }, 1);
}, 1000);

Or you can use $interval and you are following my answer you can use $timeout instead of setTimeout also

Upvotes: 0

Related Questions