Question

我有下一个功能：

function clearWorkingArea() {
     $('.extensionText').children('span').fadeOut(600, function() { $(this).remove() });
        $('ul.texts').fadeOut(600, function() { $(this).empty() });
        $('.buttonsDiv').fadeOut(600, function() { $(this).remove() });
        $('.processingDiv').fadeOut(600, function() { $(this).remove() });
}

我想在此函数中的所有动画完成后才调用另一个函数。我试过了：

 $.when(clearWorkingArea()).done(function() {...});

此外：

clearWorkingArea().promise().done(function() {...});

没有运气，它仍然无法正常工作。有没有办法，而不是回调地狱的衰落，做这样的功能行为？

Answer 1

clearWorkingArea仅启动动画，但这些动画都是异步的。在clearWorkingArea结束时，您的动画不太可能结束。

您必须获取每个动画的承诺，然后在所有承诺结束时使用Promise.all触发您的代码。

根据文档，您可以使用start类似方法的选项中的fadeOut参数来获取承诺： jQuery fadeOut()

希望这有帮助！

Answer 2

更新：只需双重检查jquery，动画可以返回一个承诺。我最初只做了承诺，但是为了得到jquery的承诺，你做了承诺（）。所以你毕竟不需要辅助功能。

以下是一个例子。

此外，如果您有多个选择器执行相同的操作，您可以组合使用。例如。低于.two＆amp;在600毫秒时，它已经褪色了，但我已经做了一次超过1000毫秒的褪色。还添加了一个不存在的选择器，以确保仍然有效。

＆＃13;

Promise.all(
  [
    $('.one').fadeOut(1000, function () {
      $(this).empty(); }).promise(),
    $('.two,.three').fadeOut(600, function () {
      $(this).empty(); }).promise(),
    $('.not-exist').fadeOut(600, function () {
      $(this).empty(); }).promise()
  ]
).then(function () {
  console.log('all done');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="one">
Three  1000 ms
</div>
<div class="two">
One 600 ms
</div>
<div class="three">
Two  600 ms
</div>

＆＃13;

Answer 3

我们应用这样一些简单的逻辑怎么样。

function doWorkWhenAllFinished(counter) {
  if (counter == 4) {

    //All fade animations have been complete.
    //Good to go...    

  }
}


function clearWorkingArea() {
  var counter = 0;
  $('.extensionText').children('span').fadeOut(600, function() {
    counter++;
    $(this).remove();
    doWorkWhenAllFinished(counter);
  });
  $('ul.texts').fadeOut(600, function() {
    counter++;
    $(this).empty();
    doWorkWhenAllFinished(counter);
  });
  $('.buttonsDiv').fadeOut(600, function() {
    counter++;
    $(this).remove();
    doWorkWhenAllFinished(counter);
  });
  $('.processingDiv').fadeOut(600, function() {
    counter++;
    $(this).remove();
    doWorkWhenAllFinished(counter);
  });
}

JQuery：等到所有fadeout函数完成后

3 个答案: