JQuery: 等到函数的所有 fadeout`s 完成

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 触发您的代码。

根据文档，您可以通过在 fadeOut 的选项中使用 start 参数来获得承诺，例如方法： jQuery fadeOut()

希望对您有所帮助！

Answer 2

我们要不要像这样应用一些简单的逻辑。

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

Answer 3

更新：刚刚仔细检查 jquery，动画可以 return 一个承诺。我最初只是做了承诺，但要获得 jquery 的承诺，你需要做 promise()。所以你根本不需要辅助函数。

下面是一个例子。

此外，如果您有多个选择器做同一件事，您可以合并。例如。低于 .two & .three fadeOut 600ms，但我已经让 .one fadeOut 超过 1000ms。还添加了一个 none-existent 选择器以确保事情仍然有效。

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

<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>

JQuery: 等到函数的所有 fadeout`s 完成

JQuery: Wait until all fadeout`s of function are finished

javascript

jquery

jquery-animate