How is the call stack for $(document).ready(...) assembled?

Question

I always get confused by this when I'm working on large websites and am including a bunch of alien JS files and am trying to debug stuff.

If I have

<script type="text/javascript">
     $(document).ready(function(){
          console.log("foo");
     });
     $(document).ready(function(){
          console.log("bar");
     });
</script>

then does that guarantee console.log("bar") is triggered immediately after console.log("foo") ??? Is it the same if I have

<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script>

where script1.js consists of

     $(document).ready(function(){
          console.log("foo");
     });

and script2.js consists of

     $(document).ready(function(){
          console.log("foo");
     });

What happens when I add window.onload and document.onload into the mix, e.g.

<script type="text/javascript">
     $(document).ready(function(){
          console.log("foo");
     });
     window.onload = function() { console.log("John Skeet"); };
     $(document).ready(function(){
          console.log("bar");
     });
     window.onload = function() { console.log("Bjarne Stroustrup"); };
</script>

?????

Can someone here explain, or lead me to the documentation that explains, the rule for how these "fire after everything else" functions get stacked?

@Terry I think that the key part of this question is the "does that **guarantee** `console.log("bar")` etc." part. In others words, the focus of the question is "can we rely on all browsers (on all platforms) running the `$(document).ready` functions in the same order as they do on my development machine?" — GoBusto, Apr 15 '15 at 18:37
And to further what @GoBusto is getting at, I have never seen them not fire in the order the were bound (unless setTimeout or some other delying functionality is involved) but i dont think the standards involved are opinionated about this at all so i would never depend on it. If you need things to fire in a particular order within an async paradigm then you use Promises or events to control execution order. — prodigitalson, Apr 15 '15 at 18:40
Nice question! I always just *assumes* this is going to work. I couldn't find any official answer or documentation, but I've found a duplicate question that answers using the source code (though it is from 2010, so the code might be outdated). — Kobi, Apr 15 '15 at 18:49
_"What happens when I add window.onload and document.onload into the mix"_ `window.onload` would fire _once_ ? `$(document).ready(fn)` could fire for _each_ `$(document).ready(fn)` within `js` ? — guest271314, Apr 15 '15 at 19:06

Bhojendra Rauniyar · Answer 1 · 2015-04-15T18:49:05.967

They run synchronously.

That is to say they run in order:

1. console.log("foo"); //this gets first logged
2. console.log("John Skeet"); //this gets logged after "foo"
3. console.log("bar"); //this gets logged after "John Skeet"
4. console.log("Bjarne Stroustrup"); //this gets logged after "Bjarne Stroustrup"

So, they run synchronously unless you have asynchronous code.

For eg:

$(document).ready(function(){
  setTimeout(function(){
     console.log('foo');
  }, 1000);
});
$(document).ready(function(){
  setTimeout(function(){
     console.log('bar');
  }, 2000);
});

In my example of code, I've provided asynchronous code (setTimeout method), first 'bar' gets logged and there after 'foo' is logged.

So, the document ready handlers doesn't matters for ordering but matters with its synchronous/asynchronous code.

You may even be clear by seeing the code from jquery:

jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

So, all ready handlers are pushed to the promises then calls its functions.

But is that by convention or is it laid out in a standard somewhere? I have never personally seen it happen any other way but I don't know that I would depend on in it in terms or writing my control flow. — prodigitalson, Apr 15 '15 at 18:42

score 0 · Answer 2 · edited May 23 '17 at 12:06

A couple of things:

<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script>

means that the scripts are included in that order (and order matters). Everything in script 1 will fire before anything in script 2. Here is an example:

<body>
    stuff
    <script>
        console.log('first');
        console.log('second');
    </script>
    <script>
        console.log('third');
    </script>
</body>

yields

first
second
third

If the code is asynchronous (like a lot of js is), the order in which the requests complete depends on whatever is answering the requests.

As for window.onload vs $(document).ready, there's a great answer here: window.onload vs $(document).ready()

How is the call stack for $(document).ready(...) assembled?

2 Answers2