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）：

$('#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数组的状态将在每个函数调用中发生变化，以便每个元素按顺序执行一次动画。当数组被清除时，该函数将再次运行一次以验证元素是否都已被动画化，并且在这种情况下它将返回而无需重新排队。

Answer 2

请试试这个：

我们无法在 for 循环中使用fadeIn()延迟。

相反，我们可以使用setInterval()。

请尝试以下代码。

var i;
var timeMgt;

$('#button').click(function(){
   i = 1;
   timeMgt = setInterval(ChangeImage,1000);
});

function ChangeImage()
{
    if(i<4)
    {
        $('#img' + i).fadeIn("slow").delay(1000);
        $('#img' + i).fadeOut("slow");
        i++;
    }
    else
    {
         window.clearInterval(timeMgt);
         return;
    }
}

Answer 3

您可能希望在fadeIn 和fadeOut 函数中使用回调。这是一个示例http://jsfiddle.net/JaQmd/5/。

代码的核心基本上是像这样用新的图像编号调用回调

var imageNumber = 0;

$('#button').click(function doAnimation() {
++imageNumber;
if(imageNumber <= 3){
   $("#img" + imageNumber).fadeIn('slow').delay(1000);
   $("#img" + imageNumber).fadeOut('slow', doAnimation);
  }
});​