JavaScript : How do I achieve this execution order?

Question

我有这样的东西。

function a() {
  ajax(callback_function);
}

callback_function() {
  // done!, called after ajax is finished
}

function b() {
  a();
  c();  // make sure c is executed AFTER a is finished.
}

function c() {
  // called after a()!
}

如何确保函数 c() 在 a() 完成后被调用？我想我必须使用另一个回调函数，但不确定该怎么做。

编辑

没说清楚。我希望我不在回调函数中调用 c()，因为无需调用 c() 即可调用 a()。

Answer 1

您可以将所有回调包装到匿名函数中:

function a(callback) {
    ajax(function(){
        callback_function();
        callback();
    });
}

callback_function() {
  // done!, called after ajax is finished
}

function b() {
  a(c);
   // make sure c is executed AFTER a is finished.
}

function c() {
  // called after a()!
}

或者您可以向您的 callback_function 注册另一个回调:

function a(callback) {
  ajax(function(){
    callback_function(callback);
});
}

callback_function(callback) {
  // done!, called after ajax is finished
  callback();
}

function b() {
  a(c);
   // make sure c is executed AFTER a is finished.
}

function c() {
  // called after a()!
}

更优雅(更好)的方法是将回调绑定(bind)到某个自定义事件，例如“ajax-done”，并且在 ajax 代码成功执行后，您可以触发该特定事件。
如果您使用 jquery，事件方法非常简单:

function a() {
  ajax(function(){
    $(window).trigger('ajax-done');
  });
}

callback_function() {
  // done!, called after ajax is finished
}

function b() {
  a();
   // make sure c is executed AFTER a is finished.
}

function c() {
  // called after a()!
}
$(window).bind('ajax-done',callback_function);
$(window).bind('ajax-done',c);

当然，你可以在没有 jquery 的情况下做同样的事情，但它有点困惑，因为你必须确保你的代码是跨浏览器的。