Angularjs : Update a variable after some time

Question

I'm trying to show some text while getting data from the server. I'm trying to update the variable to show loading messages after some fixed time. But I'm unable to do.

<div class="circularProgress" ng-if="showCircularProgress" id="circularProgress">
  <md-progress-circular md-mode="indeterminate" md-diameter="70"></md-progress-circular>
  <span>{{progressMessage}}</span>
</div>

  angular.forEach(messageArray, function(msg, i) {
    setTimeout(updateProgressMessage(msg), 1000);
  });

var updateProgressMessage = function(message){
                $scope.progressMessage=message;
            }

Could anyone suggest me in setting delay?

Use $interval and keep your angular.forEach inside $interval function. — gaurav bhavsar
– gaurav bhavsar, Commented Nov 21, 2016 at 12:54
updateProgressMessage(msg) method is getting called immediately. so it is always showing the last message in the array — Naghaveer R
– Naghaveer R, Commented Nov 21, 2016 at 13:06

phuzi · Accepted Answer · 2016-11-22 10:53:25Z

1

You'll have to use $timeout so that angular knows to run a digest after the callback is called. You'll also need to wrap updateProgressMessage(msg) in an anonymous function so that it doesn't get called immediately.

angular.forEach(messageArray, function(msg, i) {
    $setTimeout(function() { updateProgressMessage(msg); }, 1000);
});

If you want to repeatedly call updateProgressMessage use $interval instead and your callback will be invoked at regular intervals

For further information see the docs for $interval and $timeout

Update

If messageArray contains several items e.g. var messageArray = [1,2,3,4,5] then the above code will create a timeout for each item that will each fire at roughly the same time after about 1 second.

I'm not sure this is the behaviour you're after and would have thought you'd want something like this.

var messageArray = [1,2,3,4,5];

var intervalPromise = null;

intervalPromise = $setInterval(function() {
    if (messageArray.length > 1){
        // remove an item from the messageArray and update the progress message  
        updateProgressMessage(messageArray.shift()); 
    } else {
        // no more update messages
        $interval.cancel(intervalPromise);
    }
}, 1000);

var updateProgressMessage = function(message){
    $scope.progressMessage = message;
};

This will create an interval and fire every second (approximately). Once all messages have been processed the interval is cancelled to prevent any further execution.

edited Nov 22, 2016 at 10:53

answered Nov 21, 2016 at 12:56

phuzi

13.3k4 gold badges30 silver badges65 bronze badges

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

5 Comments

Naghaveer R Over a year ago

problem is updateProgressMessage(msg) method is getting called immediately

phuzi Over a year ago

Passing $timeout or $intervalan anonymous function that calls updateProgressMessage(msg) will prevent your callback from being run before the time period has elapsed.

phuzi Over a year ago

I can get the timeout to work as expected. I think your issue is that a timer is set for each message in your array at virtually the same time. This will cause a delay of approximately 10 seconds before updateProgressMessage is called for each item in the message array at roughly the same time

Naghaveer R Over a year ago

Yes. I need to call updateProgressMessage after 1000 milliseconds. Is it possible?

phuzi Over a year ago

Yes, see my updated answer. This will process all messages in messageArray leaving a 1 second gap between each until messageArray is empty

Madasu K · Accepted Answer · 2016-11-21 13:00:25Z

0

Use $timeout.

angular.forEach(messageArray, function(msg, i) {
    $timeout(function() { updateProgressMessage(msg); }, 1000);
});

If you want to use setTimeout only then do $scope.$apply, which is bad practice.

angular.forEach(messageArray, function(msg, i) {
    $setTimeout(function() { updateProgressMessage(msg); }, 1000);
   $scope.$apply()
});

answered Nov 21, 2016 at 13:00

Madasu K

1,8752 gold badges40 silver badges79 bronze badges

3 Comments

Naghaveer R Over a year ago

problem is updateProgressMessage(msg) method is getting called immediately

smart987 Over a year ago

Increase 1000 to 5000 or some other longer period which is suitable for you. $timeout(function() { updateProgressMessage(msg); }, 5000);

Naghaveer R Over a year ago

If I set timeout to 10secs, after 10secs all updateProgressMessage(msg) function getting call immediately plnkr.co/edit/dsKiQhAONIVNM0XojUoY?p=preview

Collectives™ on Stack Overflow

Angularjs : Update a variable after some time

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related