一个页面多个jquery ajax执行顺序？

Question

我用的jquery1.10.2
一个页面中有多个ajax请求

function f1() {
    //一大段代码
    
    //ajax请求
    doajax1();
}

function f2() {
    //一大段代码
    
    //ajax请求
    doajax2();
}

function f3() {
    //一大段代码
    
    //ajax请求
    doajax3();
}

.
.
.

如何按照f1() f2() f3() ...顺序执行？
f1()执行完之后再f2() ...

排除async: false这个办法
排除success: function () {f2();}这个办法
排除后端将多个ajax请求合成一个的办法

Answer 1

promise...then...，generator

Answer 2

例子

    function f1() {
        var d = $.Deferred();
        setTimeout(function() {
            console.log('111');
            d.resolve();
        }, 4000);
        return d.promise();
    }
    
    function f2() {
        console.log('f2');
    }
    
    f1().then(function(){f2();});

Answer 3

使用jquery 的 $.when()方法
// ajax 其他参数

var options = {type: 'GET', data: {name: '**'}};
$.when(
    $.ajax(url1, options),
    $.ajax(url2, options),
    $.ajax(url3, options),
).done(function(return1, return2, return3){
    console.log(return1);// url1 的返回
    console.log(return2);// url2 的返回
    console.log(return3);// url3 的返回
}).fail(function(obj, statusString, errorMsg){
    console.log(obj);// obj
    console.log(statusString);// error
    console.log(errorMsg);// Not Found
});

Answer 4

搞个队列:如

var Queue = (() => {
    var tasks = [];
    function run() {
        if(tasks.length) tasks.shift().call(null, run);
    }
    
    function add(fn) {
        tasks.push(fn);
    }

    return {
        add,
        run,
    }
})();

Queue.add(task1)
Queue.add(task2)

function task1(next) {
    // ...dosomething
    next()
}

function task2(next) {
    // ...dosomething
    next();
}