Is this $(document).ready being fired twice?

Question

This is the official shorthand for doc ready (in jQuery):

// Shorthand for $( document ).ready()
$(function() {
    // do something
});

In some cases, we add document on handlers. For example:

$(function () {
    $(document)
        .on('click', '.save-order-button', function (e) {
            saveOrder(e);
        })
        .on('change', '.select-product-quantity', handleChangeProductQuantity)
})

But my question is this: given the $(document).on example above, how would you add logic to be called on doc ready?

I would do it this way:

$(function () {
    $(document)
        .on('click', '.save-order-button', function (e) {
            saveOrder(e);
        })
        .on('change', '.select-product-quantity', handleChangeProductQuantity);

   
    // do below on $(document).ready
    if ($('#isNewCustomer').val() === 'true') {
        $('.profile').hide();
        $('.links').hide();
    }

    callSomeOtherFunction();
})

A coworker prefers this way:

$(function () {
    $(document)
        .on('click', '.save-order-button', function (e) {
            saveOrder(e);
        })
        .on('change', '.select-product-quantity', handleChangeProductQuantity)
        .ready(() => {
            if ($('#isNewCustomer').val() === 'true') {
                $('.profile').hide();
                $('.links').hide();
            }
            callSomeOtherFunction();
        });
})

Is either way ok?
Is my coworker's way fine? Is doc ready being fired twice in my coworker's example?
If we did both, for example, some in .ready(() =>, my coworker's way, and also some my way, would doc ready be getting fired twice? Which would be fired first?

Thx in advance.

Answer 1

Is either way ok? Is my coworkers way fine?

Both work as intended. But the jQuery authors write the following about using .ready():

Query offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

• $( handler )
• $( document ).ready( handler )
• $( "document" ).ready( handler )
• $( "img" ).ready( handler )
• $().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior. For example, the third syntax works with "document" which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready.

So this favours your version of the code.

Is doc ready being fired twice in my coworkers example?

Yes, all callbacks on the ready event get called, also handlers that are attached after the DOM is ready, which is the case in the alternative code.

The jQuery documentation ensures this:

If the DOM becomes ready and the browser fires DOMContentLoaded before the code calls .ready( handler ), the function handler will still be executed.

I would certainly go for your version of the code. The additional .ready() call gives the impression that the author has doubts whether that code can be executed synchronously, but of course it can, because it is already ensured that the DOM is ready.

Another way to look at it, is that the alternative code doesn't need the $(function () { }) wrapper around it, and then it makes more sense to have the .ready() handler.

But the main objection remains: .ready() is deprecated since jQuery 3.0