Javascript order of asynchronous execution

Question

I know there are lots of similar questions, but I am looking for feedback on a specific scenario.

Let's say I have a page that contains the following code:

<script>
  var myCallback = function() {
      // stuff...
  }
</script>

<script async src="https://example.com/file.js?callback=myCallback"></script>

<script>
  var obj = {
    render: function() {
      this.funcA();
      this.funcB();
      this.funcC();
    },

    funcA: function() {
      // stuff
    },

    funcB: function() {
      // stuff
    },

    funcC: function() {
      // stuff
    }
  }

  obj.render();
</script>

The external script is set up to call 'myCallback' after it is loaded.

Is it possible that myCallback can be called while obj.render() is executing, or will it always wait until after render and all of its' subfunctions are called?

In other words, is it possible for myCallback to be called sometime in between the execution of funcA , funcB , and funcC or will it always wait until after they are all executed?

Answer 1

you cannot really tell when the asynch is completed. Most probably after obj.render() because it takes a while to initiate the asynchrone process. In the meanwhile the code for obj.render is processed. But depending on such a code flow seems like tricky business. Let's hypothetical assume that the asynch code is loaded instantly because it is cached - then it might run before or while other parts of your code run.