jQuery问题：使用.each()迭代时动画同时执行而非依次触发

这个坑我之前踩过！你现在的代码里，所有元素的setTimeout都是在遍历瞬间被创建的，而且延迟时间全是500ms——相当于32个定时器在同一时刻开始倒计时，到点自然一起触发动画，完全达不到依次执行的效果。

问题根源 #

在$(".mini").each()循环中，每一次迭代都会立即生成一个延迟500ms的定时器。因为遍历的速度极快，所有定时器的启动时间几乎没有差别，最终它们会同时触发go函数。

修复方案 #

只需要把延迟时间改成基于元素索引的递增数值，让每个元素的定时器依次错开500ms即可。比如给第N个元素设置500 * (index + 1)的延迟（如果希望第一个元素也等待500ms再执行），或者用500 * index让第一个元素立刻启动，后续依次间隔500ms。

修正后的代码：

function iterate() { 
  $(".mini").each(function(index) { 
    var element = $(this); 
    // 每个元素的延迟时间随索引递增，实现依次执行
    setTimeout(function() {go(element)}, 500 * (index + 1)); 
  }); 
} 
function go(element) { 
  element.animate({left: "500px"},200); 
}

额外说明 #

如果你的动画逻辑更复杂（比如需要等待上一个动画完成再执行下一个），可以考虑用递归调用或者Promise链式调用的方式，不过对于当前的需求，修改延迟时间是最简洁高效的解法。

内容的提问来源于stack exchange，提问作者Y. Moondhra