jQuery while循环不等待动画答案

【问题标题】：jQuery while loop not waiting for animationjQuery while循环不等待动画
【发布时间】：2010-12-26 06:58:57
【问题描述】：

我有一个 jQuery 函数，它在对象上执行 .clone()，然后在克隆对象上执行 .insertAfter() 和 .slideDown()。整个函数被包裹在一个while 循环中。我将尽可能保持简短和简洁，并展示一个通用示例：

while (statement) {
    // code for clone and insert  ...
    $("#newly_created_object").slideDown(500);
}

如何防止下一个 while 循环在 .slideDown() 动画（或任何其他类型的动画）结束之前触发？

提前谢谢你！

【问题讨论】：

我在我的代码中添加了一个明确的终止条件。

标签： jquery animation while-loop

【解决方案1】：

您可能想先创建并插入所有元素，然后将它们存储在一个数组中。然后，您可以使用递归函数从数组中弹出一个元素并为其设置动画，在动画回调处理程序中的剩余元素上调用您的函数——以确保第一个元素在下一个开始之前完成。

    ...
    var elems = [];
    while (statement) {
        var elem = ...clone and insert element, returning element...
        elems.push(elem);
    }

    animateElems( elems);
}


function animateElems( elems )
{
    if (elems.length > 0) {
        var elem = elems.shift();
        $(elem).slideDown( 500, function() {
             animateElems( elems );
        }
    }
}

【讨论】：

迄今为止最优雅的解决方案
同意，简直太棒了！非常感谢，谢谢！

【解决方案2】：

您必须使动画同步，但这不是一个好主意，因为它会阻塞浏览器并惹恼用户。这是关于该主题的另一个问题：JQuery synchronous animation

一个更好的主意是使用回调函数，它会在动画完成时执行。像这样：

function cloneAndInsert(elm){
  if(statement){
    // code for clone and insert
    $("#newly_created_object").slideDown(500, function(){
      cloneAndInsert(elm);
    });
  }
}

此代码将在处理一个对象时（递归地）调用自身。

【讨论】：

我打算继续使用您的解决方案，但是对于 tv 的解决方案，我只需要添加几行，而不是重写我的函数，这比我上面给出的通用示例要复杂得多。不过，谢谢，您的意见也非常感谢！

【解决方案3】：

除非你想避免closures，否则另一种解决方案是使用jQuery 的queue() 和dequeue() 函数：

while (statement) {
  var elem = ... clone and insert element, returning element ...

  $(document).queue((function (el) {
    return function () {
      el.slideDown(function () { $(document).dequeue(); });
    }; 
  })(elem));
}

工作演示：http://jsbin.com/axafo（可通过以下方式编辑：http://jsbin.com/axafo/edit#javascript）

【讨论】：

【解决方案4】：

你可以检查元素是否仍然像这样被动画：

while (statement) {
    if ($("#newly_created_object").is(":animated")) continue;
    $("#newly_created_object").slideDown(500);
}

虽然它可能不是最好的解决方案，因为你会让用户浏览器忙碌。

动画结束后正确的动作方式：

$("#newly_created_object").slideDown(500, function () {
    alert('this alert box appears when animation is finished');
});

【讨论】：