How to implement dependency between asynchronous functions in JavaScript?

You can simply think of both functions as independent. That way, you don't go daisy-chaining dependencies that operate asynchronously. You can then have one other module that uses them.

Since they do async stuff, consider using promises. You can use jQuery's deferreds for compatibility. Think of deferreds as read/write while promises are read-only.

// foo.js
define(function(){
  return function(){
    return new Promise(function(resolve, reject){
      // Do async stuff. Call resolve/reject accordingly
    });
  };
});

// bar.js
define(function(){
  return function(){
    return new Promise(function(resolve, reject){
      // Do async stuff. Call resolve/reject accordingly
    });
  };
});

// Your code (Excuse the CommonJS format. Personal preference)
define(function(require){

  // Require both functions
  var foo = require('foo');
  var bar = require('bar');

  // Use them
  foo(...).then(function(response){
    return bar();
  }).then(function(){
    // all done
  });;

});

Try creating an object property with possible values undefined , "pending" , true ; call deferred.resolve() when obj.active is true , deferred.reject() when obj.active is "pending"

var res = {
  active: void 0
};

var foo = function foo(state) {
  var t;
  var deferred = function(type) {
    return $.Deferred(function(dfd) {
        
        if (res.active === "pending" || state && state === "pending") {
          res.active = "pending";
          dfd.rejectWith(res, [res.active])
        } else {
          res.active = state || "pending";
          t = setInterval(function() {
            console.log(res.active)
          }, 100);
            setTimeout(function() {
              clearInterval(t)
              res.active = true;
              dfd.resolveWith(res, [res.active])
            }, 3000);
        }
        return dfd.promise()
      })
      .then(function(state) {
        console.log("foo value", state);
        return state
      }, function(err) {
        console.log("foo status", err)
        return err
      })
  }
  return deferred()
}

var bar = function bar(result) {
  var deferred = function(type) {
    return $.Deferred(function(dfd) {
      if (result && result === true) {
        setTimeout(function() {
          dfd.resolveWith(result, [true])
        }, 1500)
      } else {
        dfd.rejectWith(res, [res.active || "pending"])
      };
      return dfd.promise()
    })
  }
  return deferred().then(function(data) {
    console.log("bar value", data);
  }, function(err) {
    console.log("bar status", err);
  })
}

$("button").click(function() {
  $(this).is(":first") 
  ? foo().then(bar, bar) 
  : bar(res.active === true ? res.active : "pending")
    .then(foo, foo).then(bar, bar)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>foo</button>
<button>bar</button>

Not sure I understood correctly the question. But here is my take at it:

• Put you function foo into a variable

  var foo_fn = function foo(foo_args){// Your async code goes here}

• foo is async and returns something at some point. In your definition of foo, I recommend that you use promises, the concept is designed to manage composition of asynchronous functions in a clean and scalable way. jQuery implementation of the concept is convenient in a lot of simple use cases but suffers from some drawbacks which make it interesting for you at some point to use one of the many promises library which follow the Promises/A specification. For more information, you can refer to : Cf. https://thewayofcode.wordpress.com/2013/01/22/javascript-promises-and-why-jquery-implementation-is-broken/ and https://blog.domenic.me/youre-missing-the-point-of-promises

• so, say foo takes args, and returns a promise which later resolves into some value.

  var foo_fn = function foo(foo_args) { return foo_fn.promise = new RSVP.Promise (resolve, reject) {
// Your async code goes here } }

  Here I use the RSVP promise library but any promise library following the Promises/A specification could do the job.

• When bar is called, you can just do:

  function bar (bar_args) { var foo_promise = foo_fn.promise; // if foo was called, whether the computation is in progress or finished, // the foo_fn.promise field will be non-empty, as foo returns immediately // with a promise anytime it is called `` if (!foo.promise) { // foo has not yet been called so call it foo_promise = foo(foo_args); } foo_promise.then (function (foo_result) {/*some async code here*/}) }

NOTE : That solution is quite similar to the one proposed by Roamer-1888. One difference is that in Roamer proposal, the foo function will always return the same value after performing once its asyncronous computation. Don't know if this is the intended behaviour. In my implementation, foo executes the async. computation every time it is called. bar will use the latest computed value that is stored in the field foo_fn.promise. Older computations are lost, possible computation in progress is not taken into account.

If you are going to have this pattern often used in your code, you can also create a function working on the model of the define function in require.js.

You will need :

• a registry to hold the dependencies functions (foo in your example)

• the dependant function (bar in your example) will need to accept the dependencies functions computed value as part of their signature. For example, a hash of the dependencies could be passed as first parameter, so bar signature could be: {foo: foo_result}, other_bar_args...

• the dependencies function must follow the model of my previous answer, i.e. register their promise value as a property on themselves when they execute.

• Reminder : you need to name those dependencies functions to reference them inside their body, and then add that object to the registry.

In the define function body, you wrap the dependent function into another one which :

• Get all dependencies from the registry

• Get all dependencies values, executing the dependencies when necessary (similarly to my previous answer). This means you end up having a list of promises, whose results you then congregate together (RSVP.hash for example with RSVP promise library). I believe jQuery has a similar function with jQuery.when

• you call the dependent function (bar) with this hash of results as a first argument, other arguments being the same as the wrapped function

• that wrapped function is the new bar, so when bar is called, it will be the wrapped function which will be called.

A bit lengthy but it should work. If you want to see some code, let me know if this is what you were looking for. In any case, if you are going to have complex async. in your code, it could be interesting for you to use a compliant promise library. $.deferred is also to be used only when you have nothing better at sight as it makes it harder for you to track the behaviour of your functions : you need to keep track of all places where this deferred appears to be able to reason about your program.