What is the order of execution? JQuery: $(document).ready(function () { }); $(window).on('load', function () { })

Question

What is the order of execution for the below sample code? Will $(window).on('load', function () { }) be executed before completing $(document).ready(function () { });.

I need to change all the text field values to uppercase after loading values form server through AJAX call. This page has more than twenty fields.

//Sample Code
$(window).on('load', function () {
      //Some Code... to change all text field values to uppercase

      alert("Window Loaded");
});

$(document).ready(function () {
    //Some Code....

    $.ajax({
        url: "TestLoadOne",
        type: "POST",
        async: false,
        contentType: 'application/text; charset=utf-8',
        success: function (data) {
            console.log('async false Ajax');
        }
    });

    $.ajax({
        url: "TestLoadOne",
        type: "POST",
        async: true,
        contentType: 'application/text; charset=utf-8',
        success: function (data) {
            console.log('async false Ajax');
        }
    });

    $.ajax({
        url: "TestLoadOne",
        type: "POST",
        async: true,
        contentType: 'application/text; charset=utf-8',
        success: function (data) {
            console.log('async false Ajax');
        }
    });

    alert("Document Loaded");
});

//C# Code.
public string TestLoadOne()
{
    System.Threading.Thread.Sleep(40000);
    return "Hello";
}

I think this [answer](https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready#:~:text=ready()%20is%20a%20jQuery%20event%20which%20occurs%20when%20the,images%20on%20the%20page%20loaded.&text=onload%20is%20a%20pure%20javascript,is%20a%20method%20in%20jQuery.)s your question. — ROOT, Jun 05 '20 at 04:22
I am concerning about the AJAX calls inside document.ready. Will $(window).on("load", function(){}); wait for AJAX call (inside document.ready) to complete? — Willington, Jun 05 '20 at 04:26

score 1 · Answer 1 · answered Jun 05 '20 at 04:37

Because your AJAX calls are asynchronous, there isn't really telling in what order they will finish. What we do know is that the calls will be fired off inside document.ready before window.onLoad is called (see for details). Ideally you should write your callbacks such that their order doesn't matter.

ABGR · Answer 2 · 2020-06-05T05:47:52.490

Will $(window).on('load', function () { }) be executed before completing $(document).ready(function () { });.

The answer is "Yes".

$(window).on('load', function () { }) will be executed AFTER $(document).ready(function () { })

However, since there are asynchronous operations are involved here (AJAX), they will be completed after $(window).on('load', function () { }) gets executed.

Even inside $(document).ready(function () { })

alert("Document Loaded"); will execute before the AJAX request is processed.

Let's mimic this:

function A(){ //Similar to document.ready

setTimeout(()=>{
 alert("hello from setTimeout") //similar to Ajax request
}, 0)

 alert("hello from A")
}

function B(){

alert("Hello from B") //Similar to window.load
}

function C(){ //Any other function in the script executing after window.load

  alert("Hello from C") 
}


A();
B();
C()

You notice that setTimeout gets executed after all of these methods execution get finished.

score 1 · Answer 3 · answered Jun 05 '20 at 04:47

it depends, for your case you are using $.ajax, if you set the async to false, it will wait for the $.ajax until it finishes and return a response, but if you set it to true it will not wait:

async: false,:

//Sample Code
$(window).on('load', function () {
      //Some Code... to change all text field values to uppercase
      alert("Window Loaded");
});

$(document).ready(function () {
    alert("Document Loaded");
    
    $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        async: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            console.log('async false Ajax');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

async: true,:

//Sample Code
$(window).on('load', function () {
      //Some Code... to change all text field values to uppercase
      alert("Window Loaded");
});

$(document).ready(function () {
    alert("Document Loaded");
    
    $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        async: true,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            console.log('async true Ajax');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

What is the order of execution? JQuery: $(document).ready(function () { }); $(window).on('load', function () { })

3 Answers3