Adding a delay in AngularJS forEach

Question

I'm trying to put a delay in a forEach loop in AngularJS. With $timeout, they're firing once at the same time. With $interval, they're caught in an infinite loop, again at the same time.

I need the function delay between iterations of the forEach loop to fire the animations in delayed succession rather than at the same time.

...
vm.questions = [
    {correct:false,animateDemo:false},
    {correct:true,animateDemo:false}, 
    {correct:true,animateDemo:false}
];

vm.questions.forEach(function(question, idx) {
    // need a delay between animationDemo assignments
    $timeout(function(){
      if (question.correct) {
        question.animateDemo = true;
      }
    },1000);
  });

I tried interval too, but that causes an infinite loop.

vm.questions = [{correct:false}. {correct:true}, {correct:true}];


vm.questions.forEach(function(question, idx) {
    // causes infinite loop
    $interval(function(){
      if (question.correct) {
        question.animateDemo = true;
      }
    },1000);
  });

I'm sure the solution is probably something simple, but getting it in this syntax is a bit confusing to me personally.

BShaps · Accepted Answer · 2018-04-27 21:43:18Z

1

What you can do is have a dynamic timeout for each question animation.

Something like this:

var timeoutTimer = 1000;
vm.questions.forEach(function(question, idx) {
    $timeout(function(){
      if (question.correct) {
        question.animateDemo = true;
      }
    }, timeoutTimer);
    timeoutTimer += 1000;
  });

You want to use $timeout and not $interval since you only want each animation to trigger once. $interval will execute every x seconds until you cancel it.

$timeout is a promise so code will continue to execute while it waits for the delay. This is why it appears they are all firing at the same time. They actually are probably a few nanoseconds apart from each other.

edited Apr 27, 2018 at 21:43

answered Apr 27, 2018 at 21:30

BShaps

1,4248 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Adding a delay in AngularJS forEach

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related