多个ajax顺序执行问题及ajax请求为同步时loading效果无意义的问题

　　ajax是一种常用的网页局部刷新技术，当请求数据时间较长或防止用户多次点击等情况下，会在请求数据的过程中添加loading效果，提高用户体验。
　　当需要执行多个ajax并需要考虑执行顺序时，可以使用ajax嵌套、同步、回调三个方法。
　　1、ajax嵌套：

$.ajax({
    url : "url",
    data : data, 
    type : "POST",
    dataType:"json",
    success : function(result,status,xhr) {

　　　　$.ajax({
    　　　　url : "url",
    　　　　data : data, 
    　　　　type : "POST",
    　　　　dataType:"json",
    　　　　success : function(result,status,xhr) {

    　　　　},
　　　　});

    },
});

　　2、同步
　　ajax请求设置为同步请求，这时执行ajax执行结束前不会执行之后的代码，保证ajax的执行顺序，但同时ajax之前的调用showLoading在整个方法执行完以后才会生效，这就导致loading效果毫无意义。我们可以使用setTimeout来解决这个问题。
　　如showLoadingTimeout方法把需要先生效之外的代码放入setTimeout方法内，延迟0秒后执行。以此来解决这个问题。

$.ajax({
    　　url : "url",
    　　data : data, 
    　　type : "POST",
    　　dataType:"json",
    　　async:false,
    　　success : function(result,status,xhr) {

    　　},
});

function showLoadingTimeout(fun){
    showLoading();//loading效果展示方法
    if(typeof fun == "function"){
        setTimeout(function(){
            fun();
        },0)
    }
}
3.回调
　　嵌套升级版
function fun1(fun){

　　$.ajax({
    　　　　url : "url",
    　　　　data : data, 
    　　　　type : "POST",
    　　　　success : function(result,status,xhr) {
        　　　　if(typeof fun == "function"){
　　　　　　　　　　　fun();
　　　　　　　　　}
    　　　　},
　　　　});

}

function fun2(fun){

　　$.ajax({
    　　　　url : "url",
    　　　　data : data, 
    　　　　type : "POST",
    　　　　success : function(result,status,xhr) {
        　　　　if(typeof fun == "function"){
　　　　　　　　　　　fun();
　　　　　　　　　}
    　　　　},
　　　　});

}
function fun(){
　　....
　　fun2(function(){
　　　　fun1(function(){
　　　　　　......
　　　　});
　　});
　　.....
}

转载于:https://www.cnblogs.com/abc2019/p/10256180.html