在 AngularJS forEach 中添加延迟答案

【问题标题】：Adding a delay in AngularJS forEach在 AngularJS forEach 中添加延迟
【发布时间】：2018-04-27 21:21:14
【问题描述】：

我正在尝试在 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);
  });

我确信解决方案可能很简单，但是以这种语法得到它对我个人来说有点混乱。

【问题讨论】：

标签： angularjs foreach timeout intervals

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

【讨论】：