jQuery: Enforce order of execution of document.ready() calls

Question

I'm working on a codebase with multiple blocks of code setting some behavior on document.ready() (jQuery). Is there a way to enforce that one specific block is called before any of the others?

Background: I need to detect JS errors in an automated testing environment, so I need the code that starts logging JS errors to execute before any other JS code executes.

Solution 1

document.ready() callbacks are called in the order they were registered. If you register your testing callback first, it will be called first.

Also if your testing code does not actually need to manipulate the DOM, then you may be able to run it as the code is parsed and not wait until the DOM is ready which would run before the other document.ready() callbacks get called. Or, perhaps you could run part of your testing code immediately and defer only the part that uses the DOM until document.ready().

Another idea is (for testing purposes only) you could run with a slightly modified version of jQuery that added a flag to document.ready() that when passed and set to true indicated to call that function first or you could add a new method document.readyFirst() that would call your function first. This would involve minor changes to the document.ready() processing code in jQuery.

Solution 2

As @jfriend00 mention that ready callbacks are called in the order they were registered.

So even if this code block called on the beginning, you can set another callback in it so it'll be executed on endmost.

jQuery(document).ready(function(){
    jQuery(document).ready(function(){
        // This block will be executed after all ready calls.
    });
});

Solution 3

You should be able to use holdReady to do this. As long as it is included before your ready events, you can run your own code and then trigger the other ready events.

Solution 4

I was trying to do something similar, I was loading a bunch of polyfills that had .ready() functions, but I also had my own .ready()s on page that I needed executed first, though the polyfills were loaded in the header.

I found a nice way around it by having a .ready() very early on (right after jQuery loads) that executes functions from an array. Because it's very early in the source code it's .ready() is executed first. Further down the page I can add functions to the array and, so they all execute before any other .ready()s.

I've wrapped it up in a .beforeReady() function and put it on GitHub as jQuery-Before-Ready for anyone that is interested. https://github.com/aim12340/jQuery-Before-Ready

Solution 5

You can execute the logging start code in DOMReady and other initialization in load. Or you could make your own initialization manager which calls your logging start code first and then all other initialization callbacks (provided that those are registered with your manager and not jQuery, unless you want to hack jQuery and extract them from there, which I don't advise).

View more solutions