如何在具有多个回调的函数中获取最后一个回调？

Question

我有一个带大量jQuery .show("slow", callback)方法的showMain()函数，并且仅当相应的慢速“动画”完成时才触发每个回调。 如何编写showMain(callback)函数，该回调函数仅在所有动画完成后才触发一次回调？

从理论上讲，假设我有这套功能

 function foo1(callback){ //do something callback(); } function foo2(callback){ //do something callback(); } function foo(callback){ foo1(callback); foo2(callback); } foo(function(){ alert("Hello"); }); 

如何编写一个仅调用一次回调， 最后执行一次的函数？

如果我写这个，回调将被触发两次。

Answer 1

如果知道要打多少次节目，如何维护一个计数器呢？

var callback = function() {....} // the function you want to execute when all done
var itemsToShow = 4; // just an example
var slowCallback = function(){
    itemsToShow--;
    if(itemsToShow===0) {
        callback();
    }
};
$(...).show('slow', slowCallback);
$(...).show('slow', slowCallback);
$(...).show('slow', slowCallback);
$(...).show('slow', slowCallback);

注意 ：仅当您知道要调用多少次时，它才会起作用.show否则将计数器初始化为0并在每次show调用时递增

Answer 2

如果您想使用回调，则需要一个控制变量。 我将通过以下方式解决您的问题：

var i = 2 // number of your "shows" methods.
function foo1(callback){
  //do something
  x = x-1;
  if(x<=0)callback();
}

function foo2(callback){
  //do something
  x = x-1;
  if(x<=0)callback();
}

function foo(callback){
  foo1(callback);
  foo2(callback);
}

您也许考虑使用Promises和Promises.all应该解决您的问题。

Answer 3

您可以通过将它们转换为Promises来绕过控制变量问题。 看到这个小提琴： https : //jsfiddle.net/kqso0kkb/1/

$(document).ready(function() {
  console.clear();

  Promise.all([one(), two()]).then(() => {
    console.log('all done');
  })

  function one() {
    return new Promise((resolve, reject) => {
      $('#div').show("slow", resolve);
    }).then(() => console.log('done 1'));
  }

  function two() {
    return new Promise((resolve, reject) => {
      $('#div').show("slow", resolve);
    }).then(() => console.log('done 2'));
  }
});

您可以放任何您喜欢的回调而不是console.log 。 这样，您可以使用promise加载任何大小的数组，并且.all将在完成所有操作后执行您的函数

Answer 4

这就是我解决问题的方法：

 function foo(callback){ $("#div1").show("slow"); $("#div2").show("fast"); if (typeof callback === 'function'){ $("#div1, #div2").promise().done(callback); } } 

 #div1, #div2{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1"> Text1 </div> <div id="div2"> Text2 </div> <input type="button" value="show" onClick="foo(function(){alert('Show Once')})" />