javascript - 为什么所有迭代都同时运行？

Question

这是 jsfiddle模拟与此代码相关的问题:

$('#button').click(function(){
   var i;
   for (i = 1; i < 4; ++i) {
      $('#img' + i).fadeIn("slow").delay(1000);
      $('#img' + i).fadeOut("slow");
   }
});

我期待 #img1 元素淡入然后执行停止 1 秒然后淡出，然后重新开始 #img2 元素等

Answer 1

动画似乎同时运行的原因是 jQuery 的动画都是异步执行的。所以您的代码所做的基本上是启动所有动画，然后您的浏览器几乎同时处理实际动画。

不过，jQuery 的动画函数确实支持使用在动画结束后调用的回调。通过确保后面的动画在此回调中发生，我们可以强制动画按顺序执行。

这是您可以实现您的要求的一种方式 (jsfiddle here):

$('#button').click(function(){
    var i;
    var $elems = [];
    for (i = 1; i < 4; ++i) {
        $elems.push($('#img' + i));
    }

    var animate = function () {
        var $elem;
        if ($elems.length) {
            $elem = $elems.shift();
            $elem.fadeIn("slow").delay(1000).fadeOut("slow", animate);
        }
        // if the $elems has been cleared out, we're done and this function won't be requeued
    };

    animate();
});

请注意，我正在排队另一个调用 animate() 作为 .fadeOut 的回调。然后该函数将重新执行，但是 $elems 数组的状态将在每次函数调用中发生变化，以便每个元素的动画按顺序执行一次。当数组被清空时，该函数将仅再次运行一次以验证元素是否已全部动画化，在这种情况下它将返回而不会自行重新排队。