jQuery while循环不等待动画

Question

我有一个jQuery函数，它在对象上执行.clone()，然后在克隆对象上执行.insertAfter()和.slideDown()。这整个功能被包裹在while循环中。我会保持这个短而简洁越好，显示了通用例如：

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

如何防止下一个while循环从.slideDown()动画之前发射（或任何其他形式的动画为此事）结束？

预先感谢您！

Answer 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); 
     } 
    } 
} 

Answer 2

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

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

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

这段代码会在一个对象（递归）完成时调用它自己。

Answer 3

您可以检查元素仍然被动画这样的：

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'); 
}); 

Answer 4

另一种解决方案，除非你想避免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）