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

我也尝试了 interval，但这会导致无限循环。

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

在 AngularJS forEach 中添加延迟

Adding a delay in AngularJS forEach

foreach

timeout

intervals

angularjs