jQuery的while循环而不是等待动画 [英] jQuery while loop not waiting for animation

问题描述

我有一个jQuery函数，它的对象上的 .clone（），然后一个 .insertAfter（）和 .slideDown（）克隆对象。这整个函数中包含了一个，而循环中。我将继续以此为简明扼要地展现出一种通用的例子：

I have a jQuery function that does a .clone() on an object, and then an .insertAfter() and a .slideDown() on the cloned object. This whole function is wrapped inside a while loop. I will keep this as short and concise as possible and show a generic example:

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

我怎样才能prevent烧制而成的 .slideDown（）动画（或任何其他类型的动画为此事）结束前的下一个while循环？

How can I prevent the next while-loop from firing before the .slideDown() animation (or any other kind of animation for that matter) ends ?

感谢你在前进！

推荐答案

您可能需要创建并首次将所有的元素，将它们存储在数组中。然后你可以使用一个递归函数弹出一个元素关闭阵列和动画它，致电在动画的回调处理剩余的元素功能 - 以确保第一是下一个开始前完成。

You might want to create and insert all of the elements first, storing them in an array. Then you can use a recursive function to pop one element off the array and animate it, calling your function on the remaining elements in the callback handler for the animation -- to ensure that the first is complete before the next starts.

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

这篇关于jQuery的while循环而不是等待动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！