AngularJS foreach delay loop

Question

I want to use delay in my angular.foreach loop. I have a list and I want to display them one by one with 2 seconds periods.

 angular.forEach(vm.SimulationResult, function (value, key) {
                    timeout2 = $timeout(function () {
                        vm.Alerts.push({ msg: value.MainStatus });
                    }, 2000);
                });

what should I do ?

Might be worth reading: http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop — Matt Lishman, Apr 05 '16 at 10:06
is that important ? It is a list with primitive types. @SiddharthAjmera — Egomen, Apr 05 '16 at 11:16

score 5 · Answer 1 · answered Apr 05 '16 at 10:27

5

Take advantage of the fact that $timeout returns a promise and chain the promises together so that each one starts another promise timeout that will push the next alert:

let promise = $timeout();
angular.forEach(vm.SimulationResult, function(value, key) {
     promise = promise.then(function() {
         vm.Alerts.push({ msg: value.MainStatus });
         return $timeout(2000);
     });
});

(make sure your version of angular is up to date as older versions didn't let you omit the callback function in a timeout)

answered Apr 05 '16 at 10:27

Duncan

92,073
11
122
156

Worked for me (AngularJS 1.5.8) – iiminov Oct 12 '16 at 08:39
Worked for me as well – Rohidas Kadam Apr 28 '17 at 14:39
Nice! Worked with Angular 1.6.2 – hatsrumandcode Jul 05 '19 at 01:20

AngularJS foreach delay loop

1 Answers1