jQuery while循环不等动画

我有一个jQuery函数，它在一个对象上执行.clone() ，然后在克隆对象上执行.insertAfter()和.slideDown() 。 整个函数包含在while循环中。 我将尽可能简洁明了地说明这一点，并展示一个通用示例：

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

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

先感谢您 ！

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同步动画

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

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

当完成一个对象（递归）时，此代码将调用自身。

Answer 3

除非你想避免闭包 ，否则另一种解决方案是使用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 ）

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