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

时间:2017-09-26 12:46:43

标签: javascript jquery jquery-animate

我有下一个功能:

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

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

3 个答案:

答案 0 :(得分:1)

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

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

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

希望这有帮助!

答案 1 :(得分:1)

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

以下是一个例子。

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



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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

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

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