执行的顺序是什么？JQuery：$(document).ready(function () { })；$(window).on('load'，function () { })

Question

下面的示例代码的执行顺序是什么？$(window).on('load', function () { })会在完成$(document).ready(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";
}

Answer 1

因为您的AJAX调用是异步的，所以没有真正说明它们将按照什么顺序结束。我们所知道的是，在调用document.ready (see for details)之前，调用将在window.onLoad内部启动。理想情况下，您应该编写回调，这样它们的命令就不重要了。

Answer 2

将在完成$(document).ready(function () { })之前执行$(window).on('load'，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就会被执行。

Answer 3

这取决于，对于使用$.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>

​