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);