javascript - jQuery 的 AJAX 执行顺序

Question

我有这段代码(ajax 是异步的):

function echoHello()
{
    return "hello";
}

function echoWorld()
{
    return $.ajax({
        //this will return "world";
    });
}

console.log(echoHello());

$.when(echoWorld()).done(function(response)
{
    console.log(response);
});

输出“你好”和“世界”(按此顺序)。但是如果稍微改变一下，那么console.log()顺序不同:

function echoHello()
{
    return "hello";
}

function echoWorld()
{
    return $.ajax({
        //this will return "world";
    });
}

$.when(echoWorld()).done(function(response)
{
    console.log(response);
});

console.log(echoHello());

是否保证相同的输出？或者它可能会输出“ world ”然后是“ hello ”？

Answer 1

$.ajax() 返回 jqXHR实现 Promise 接口(interface)的对象。如果 async选项为假，它发送 同步 Ajax 请求并返回 已解决 promise 。
对于 $.when()如果参数既不是 Deferred 也不是 Promise 也不是 Thenable，它返回一个 已解决 promise 。
所以下面的例子将打印“Sync”、“Hello”、“World”、“Async”。
JSFiddle

jQuery(document).ready(function( $ ){
    let echoHello = () => "Hello";
    let echoAsync = () => $.ajax({url: "data:text,Async"});
    let echoSync = () => $.ajax({ async: false, url: "data:text,Sync" });

    let log = response => console.log(response);

    $.when(echoAsync()).done(log); // logs "Async"
    $.when(echoSync()).done(log); // logs "Sync"
    $.when(echoHello()).done(log); // logs "Hello"
    console.log('World'); // logs "World"
});

而且，为了您的信息，从 jQuery 1.8 开始，不推荐使用 async: false 和 jqXHR。