添加Angularjs foreach的延迟

Question

我正在尝试在gangularjs中延迟延迟。借助$超时，他们同时开火。通过$间隔，它们又陷入了无限的循环，同时又被捕获。

我需要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是一个承诺，因此代码在等待延迟时将继续执行。这就是为什么他们似乎都在同一时间发射。实际上，它们可能是彼此之间的几纳秒。