ajax同步和异步

同步和异步区别

同步

同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于是排队，前一个人办理完自己的事务，下一个人才能接着办。也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。

简单总结为：上一件事情没有完成，继续处理上一件事情，只有上一件事情完成了，才会做下一件事情 。

代码演示

$.ajax({
    url: baseurl + "/system/projectInfo/list2",
    type: "post",
    async: false, //使用同步的方式,true为异步方式
    data: obj, //请求的参数 = 给后台传的参数
    success: function(data) {
      for (var i = 0, length = data.data.length; i < length; i++) {
        projectInfoHtml +=
          "<tr data-id="+data.data[i].id+">" +
          "<td><input type='checkbox' name='checkItem'></td>" +
          "<td style='width:55%'><a  target='_blank' href='../jgw/infor_detail.html?id="+ data.data[i].id+" ' style='width:400px;overflow:hidden;text-overflow:ellipsis'> "+
          data.data[i].title +
          "</a></td>" +
          "<td>" +
          data.data[i].region +
          "</td>" +
          "<td>" +
          data.data[i].stage +
          "</td>" +
          "<td>" +
          data.data[i].type +
          "</td>" +
          "<td>" +
          data.data[i].createDate +
          "</td>" +
          "</tr>";
      }
      $("#projectinforlist").html(projectInfoHtml);
      
    }

异步

异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

异步 --> 规划要做一件事情，但是不是当前立马去执行这件事情，需要等一定的时间，这样的话，我们不会等着他执行，而是继续执行下面的操作
–> “只有当下面的事情都处理完成了，才会返回头处理之前的事情；如果下面的事情并没有处理完成，不管之前的事情有没有到时见，都踏踏实实的给我等着”
–> 在JS中，异步编程只有四种情况：
–> 定时器都是异步编程的
–> 所有的事件绑定都是异步编程的
–> Ajax读取数据都是异步编程的，我们一般设置为异步编程
–> 回调函数都是异步编程的

代码演示

$.ajax({
          type: "post",
             async:true, //不设置此参数的话默认为true
                        url: "/teacher/ajaxtimeline",
                        data: {"month": month, "uid":<?php echo intval($teacher->uid);?>},
                        dataType: "json",
                        success: function(data) {
                            //假设data.canNotSetDays服务端返回的是[9,10,11]
                            $.each(data.canNotSetDays, function(i, item) {
                                canNotSetDays.push(item);
                            });
 
                            console.log('**********ajax result ************');
                            //此处是可以获取canNotSetDays的值的，并能查找到其中的元素数字9
                            console.log(canNotSetDays);
                            console.log(canNotSetDays.length);
                            console.log(canNotSetDays.indexOf(9));
 
                        }
                    });
 
                    console.log('***********after ajax ***********');
 
                    //此处是获取不到canNotSetDays的值的，长度为0，无法查找到其中的元素数字9
                    console.log(canNotSetDays);
                    console.log(canNotSetDays.length);
                    console.log(canNotSetDays.indexOf(9));
 
                    console.log('**********delay two seconds************');
 
                    setTimeout(function(){
                        //延迟2秒后也是可以获取canNotSetDays的值的，并能查找到其中的元素数字9
                        console.log(canNotSetDays);
                        console.log(canNotSetDays.length);
                        console.log(canNotSetDays.indexOf(9));
                    }, 2000);