Setting a time delay in angularjs

Question

I would like to push the data into the array after a 2 second delay each time.

//working code

$scope.GetData = function(){
  DataFactory.GetCategories()
  .success(function(data,status){
    $scope.TheArray.push(data);
   })
}

//This doesnt work. No data is shown in html

$scope.GetData = function(){
  DataFactory.GetCategories()
  .success(function(data,status){
    setTimeout(function() {
       $scope.TheArray.push(data);
     }, 2000);    
   })
}

EDIT:

$scope.GetData = function(){
  DataFactory.GetCategories()
  .success(function(data,status){
    $timeout(function () {
                        $scope.ChatHistory.push(JSON.parse(JSON.parse(data)));
                    }, 3000);    
   })
}

@RobJ, he doesn't want to push data every 2 seconds, but just once after a 2 second delay. $interval will cause the data to be added every 2 seconds. — Abhishek Jain
– Abhishek Jain, Commented Jan 28, 2015 at 14:04

Abhishek Jain · Accepted Answer · 2015-01-28 14:02:35Z

2

Use $timeout instead of setTimeout, and it will run fine. When using setTimeout, you will have to do $scope.$apply to propogate your changes to your view/model, but $timeout does that magic for you, so you don't have to worry about it.

More info on $timeout here

EDIT: You will have to add $timeout as a dependency, like below

angular.module('myApp').controller('MyController', function($timeout) {
$scope.GetData = function(){
  DataFactory.GetCategories()
  .success(function(data,status){
    $timeout(function () {
                        $scope.ChatHistory.push(JSON.parse(JSON.parse(data)));
                    }, 3000);    
   })
}
})

edited Jan 28, 2015 at 14:02

answered Jan 28, 2015 at 13:51

Abhishek Jain

2,97724 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek Jain Over a year ago

you will have to add it as a dependency on your controller

Collectives™ on Stack Overflow

Setting a time delay in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related