执行顺序是啥？ jQuery: $(document).ready(function () ); $(window).on('load', function () ) [重复]

Posted 2023-05-07

【中文标题】执行顺序是啥？ 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 调用。

【参考方案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');
        
    );
);

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

【参考方案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 在所有这些方法执行完成后才被执行。