欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ajax同步和异步

程序员文章站 2022-06-10 09:59:11
...

同步和异步区别

同步

同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能接着办。也就是说,当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);
相关标签: 同步和异步