AngularJS中为forEach循环添加延迟的实现问题

这个坑我之前踩过！直接在AngularJS的forEach里用$timeout确实会出现所有回调同时触发的情况——因为forEach是同步执行的，它会一下子把所有$timeout任务都注册到事件队列里，如果每个任务的延迟时间相同，那它们自然会同时执行。而$interval之所以会无限循环，是因为它本身是用来重复执行任务的，你没手动取消的话就会一直跑，而且同样会因为同步注册导致多个interval同时启动。

下面给你两个亲测有效的解决方案，按需选择：

方案一：给$timeout设置递增延迟（最简单） #

利用循环的索引，给每个$timeout设置一个随索引递增的延迟时间，这样每个迭代的回调就会依次触发。比如每个间隔1秒：

vm.questions = [ 
  {correct:false,animateDemo:false}, 
  {correct:true,animateDemo:false}, 
  {correct:true,animateDemo:false} 
];

vm.questions.forEach(function(question, idx) {
  // 每个迭代的延迟 = 索引 × 间隔毫秒数
  $timeout(function() {
    // 这里放你的动画触发逻辑，比如切换animateDemo状态
    question.animateDemo = true;
    
    // 如果需要动画结束后重置状态，可以再加一个$timeout
    $timeout(function() {
      question.animateDemo = false;
    }, 600); // 假设动画持续600ms
  }, idx * 1000); // 每次迭代间隔1秒
});

原理很简单：第一个回调延迟0秒（立刻执行），第二个延迟1秒，第三个延迟2秒，完美实现依次触发。

方案二：递归处理（更灵活） #

如果需要更精细的控制（比如等当前动画完全结束后再启动下一个），递归是更好的选择，还能随时终止流程：

vm.questions = [ 
  {correct:false,animateDemo:false}, 
  {correct:true,animateDemo:false}, 
  {correct:true,animateDemo:false} 
];

// 定义递归函数，处理指定索引的问题
function processNextQuestion(index) {
  // 终止条件：索引超出数组长度就停止
  if (index >= vm.questions.length) return;

  var currentQuestion = vm.questions[index];
  // 触发动画
  currentQuestion.animateDemo = true;

  // 等动画结束后，重置状态并延迟启动下一个
  $timeout(function() {
    currentQuestion.animateDemo = false;
    // 间隔500ms后处理下一个问题
    $timeout(function() {
      processNextQuestion(index + 1);
    }, 500);
  }, 600); // 当前动画持续600ms
}

// 启动递归，从第一个问题开始
processNextQuestion(0);

这种方式的优势是：可以完全掌控每个动画的生命周期，比如如果某个动画执行出错，你可以在递归里加入判断逻辑，直接终止后续流程。

为什么$interval不适合？ #

$interval的设计目的是重复执行某个任务，比如每隔1秒刷新一次数据。如果你在forEach里注册多个$interval，它们会同时开始重复触发，而且如果没调用$interval.cancel(intervalPromise)的话，就会无限循环下去，这完全不符合你“依次触发单次动画”的需求，所以不建议用在这里。

内容的提问来源于stack exchange，提问作者curtybear