Добавление задержки в AngularJS forEach

Question

Я пытаюсь поместить задержку в цикл forEach в AngularJS. С $ timeout они запускаются один раз в одно и то же время. С $ интервалом они попадают в бесконечный цикл, опять же в то же время.

Мне нужна функция задержки между итерациями цикла forEach для запуска анимации с задержкой последовательности, а не в одно и то же время.

...
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);
  });

Я тоже пробовал интервал, но это вызывает бесконечный цикл.

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);
  });

Я уверен, что решение, вероятно, является чем-то простым, но использование этого синтаксиса меня немного смущает.

Answer 1

То, что вы можете сделать, это иметь динамический тайм-аут для каждой анимации вопроса.

Примерно так:

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

Вы хотите использовать $timeout, а не $interval, поскольку вы хотите, чтобы каждая анимация запускалась один раз. $interval будет выполняться каждые x секунд, пока вы не отмените его.

$timeout - это обещание, поэтому код будет продолжать выполняться, пока он ожидает задержки. Вот почему кажется, что они все стреляют одновременно. На самом деле они, вероятно, на расстоянии нескольких наносекунд друг от друга.