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

除非您想避免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）

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

jQuery while循环不等动画

4 个答案: