Javascript 在jQuery中设置多个对象的动画时，如何处理多次调用回调

考虑一下这个代码

$(function() {

  for (var i = 0; i < 10; i++) {
    $('body').append('<div style="width: 30px; height: 30px; background: red; margin: 10px;" />')

    }

      $('div').slideUp(1000, function() {

        $('body').append('done sliding');

      });

});

$（函数（）{
对于（变量i=0；i<10；i++）{
$（'body'）。附加（“”）
}
$（'div'）.slideUp（1000，函数（）{
$（'body'）.append（'done滑动'）；
});
});

（见附件）

它创建10个

div

s，然后将它们向上滑动。回调被调用了10次，而我更希望它被调用一次（在所有人都完成滑动之后）

我知道或类似于hasCalledCallback之类的东西，但是有没有其他更优雅的方法让多个元素动画调用一次完成回调？

试试这个

if ($('div:animated').length == 1)
        $('body').append('done sliding');

试试这个

if ($('div:animated').length == 1)
        $('body').append('done sliding');

---

一种可能是使用setTimeout：

$(function() {

  for (var i = 0; i < 10; i++) {
    $('body').append('<div style="width: 30px; height: 30px; background: red; margin: 10px;" />');
  }

  var timerid;
  $('div').slideUp(1000, function() {
    clearTimeout(timerid);
    timerid = setTimeout(function() {$('body').append('done sliding')}, 100);
  });
});

$（函数（）{
对于（变量i=0；i<10；i++）{
$（'body'）。追加（''）；
}
var-timerid；
$（'div'）.slideUp（1000，函数（）{
清除超时（timerid）；
timerid=setTimeout（function（）{$（'body'）.append（'done slideing'）}，100）；
});
});

要实际避免多次调用回调，请仅将其添加到最后一个div：

$(function() {

  var lastDiv, otherDivs = [];
  for (var i = 0; i < 10; i++) {
    div = $('<div style="width: 30px; height: 30px; background: red; margin: 10px;" />');
    $('body').append(div);
    if(i == 9) lastDiv = div;
    else otherDivs.push(div);
  }

  $.each(otherDivs, function(index, val) {
    val.slideUp(1000);
  });
  lastDiv.slideUp(1000, function() {
    $('body').append('done sliding');
  });
});

$（函数（）{
var lastDiv，otherDivs=[]；
对于（变量i=0；i<10；i++）{
div=$（''）；
$（'body'）。追加（div）；
如果（i==9）lastDiv=div；
其他div.推（div）；
}
$.each（其他div、函数（索引、val）{
瓦尔·斯莱德普（1000）；
});
lastDiv.slideUp（1000，函数（）{
$（'body'）.append（'done滑动'）；
});
});

---

通过向div中添加类并选择这些类，可以在没有lastDiv和其他div变量的情况下完成最后一部分。

一种可能是使用setTimeout：

$(function() {

  for (var i = 0; i < 10; i++) {
    $('body').append('<div style="width: 30px; height: 30px; background: red; margin: 10px;" />');
  }

  var timerid;
  $('div').slideUp(1000, function() {
    clearTimeout(timerid);
    timerid = setTimeout(function() {$('body').append('done sliding')}, 100);
  });
});

$（函数（）{
对于（变量i=0；i<10；i++）{
$（'body'）。追加（''）；
}
var-timerid；
$（'div'）.slideUp（1000，函数（）{
清除超时（timerid）；
timerid=setTimeout（function（）{$（'body'）.append（'done slideing'）}，100）；
});
});

要实际避免多次调用回调，请仅将其添加到最后一个div：

$(function() {

  var lastDiv, otherDivs = [];
  for (var i = 0; i < 10; i++) {
    div = $('<div style="width: 30px; height: 30px; background: red; margin: 10px;" />');
    $('body').append(div);
    if(i == 9) lastDiv = div;
    else otherDivs.push(div);
  }

  $.each(otherDivs, function(index, val) {
    val.slideUp(1000);
  });
  lastDiv.slideUp(1000, function() {
    $('body').append('done sliding');
  });
});

$（函数（）{
var lastDiv，otherDivs=[]；
对于（变量i=0；i<10；i++）{
div=$（''）；
$（'body'）。追加（div）；
如果（i==9）lastDiv=div；
其他div.推（div）；
}
$.each（其他div、函数（索引、val）{
瓦尔·斯莱德普（1000）；
});
lastDiv.slideUp（1000，函数（）{
$（'body'）.append（'done滑动'）；
});
});

---

您可以在不使用lastDiv和其他div变量的情况下完成最后一部分，方法是向div添加类并选择它们。

+1，这是我的第一个想法。。。那么，请试着玩一下演示……：）这仍然会调用每个div的回调函数…只是在大多数情况下不会执行任何操作。@sje397-是的，它是。。。如果你有更好的想法，我们愿意接受……）+1.对于优雅的解决方案..但我认为应该是（$（'div:animated'）.length<1）或（$（'div:visible'）.length<1）。否则，该语句将在最后一个语句之前的语句滑动之后执行。@kai-相信我，这是我的第一个想法。。。那么，请试着玩一下演示……：）这仍然会调用每个div的回调函数…只是在大多数情况下不会执行任何操作。@sje397-是的，它是。。。如果你有更好的想法，我们愿意接受……）