多个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(){
      ......
    });
  });
  .....
}
posted @ 2019-01-11 17:10  码农abc  阅读(1238)  评论(0编辑  收藏  举报