在AngularJS forEach中添加延迟

Question

我试图在AngularJS中的forEach循环中加载延迟。 使用$ timeout，他们会同时触发一次。 使用$ interval，它们会同时陷入无限循环。

我需要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是一个承诺，因此代码将在等待延迟时继续执行。 这就是为什么看起来他们都在同一时间开火。 它们实际上可能相距几纳秒。