执行顺序是什么？ jQuery: $(document).ready(function () { }); $(window).on('load', function () { }) [重复]答案

【问题标题】：What is the order of execution? JQuery: $(document).ready(function () { }); $(window).on('load', function () { }) [duplicate]执行顺序是什么？ jQuery: $(document).ready(function () { }); $(window).on('load', function () { }) [重复]
【发布时间】：2020-09-24 05:28:40
【问题描述】：

以下示例代码的执行顺序是什么？将在完成 $(document).ready(function () { }); 之前执行 $(window).on('load', function () { })。

通过 AJAX 调用从服务器加载值后，我需要将所有文本字段值更改为大写。此页面有二十多个字段。

//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";
}

【问题讨论】：

我认为这是answers 你的问题。
我担心 document.ready 中的 AJAX 调用。将 $(window).on("load", function(){});等待 AJAX 调用（在 document.ready 中）完成？
不，窗口 onload 事件不依赖于 AJAX 调用。

标签： javascript jquery

【解决方案1】：

因为您的 AJAX 调用是异步的，所以并没有真正说明它们将以什么顺序完成。我们所知道的是，在调用window.onLoad (see for details) 之前，调用将在document.ready 内部被触发。理想情况下，您应该编写回调，使其顺序无关紧要。

【讨论】：

【解决方案2】：

这取决于您使用$.ajax的情况，如果您将async设置为false，它将等待$.ajax完成并返回响应，但如果您将其设置为true不会等待：

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');
        }
    });
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

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');
        }
    });
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

之前会执行 $(window).on('load', function () { }) 完成 $(document).ready(function () { });.

答案是“是”。

$(window).on('load', function () { }) 将被执行之后 $(document).ready(function () { })

但是，由于这里涉及到异步操作（AJAX），所以会在$(window).on('load', function () { })被执行后完成。

即使在$(document).ready(function () { })里面

alert("Document Loaded"); 将在处理AJAX 请求之前执行。

让我们模仿一下：

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()

您注意到setTimeout 在所有这些方法执行完成后才被执行。

【讨论】：