同步(sync)与异步(async)编程

同步与异步

同步:在进程中任务未结束时需等待结束才能执行下一个任务 
异步:在进程中任务未结束但在等待的过程中可先去执行下一个任务
js是属于单线程,所以我们最好采用异步编程
单线程:所有的任务由一个线程来完成  
多线程:多个任务可分配给不同的线程来完成

js中的异步编程:

1.定时器属于异步编程(到时间点后才开始执行,当时间设置为0也不会立即执行=> 浏览器有延迟时间:谷歌:5~6ms IE:10~13ms)
2.事件绑定属于异步编程(事件触发时才执行)
3.回调函数也可理解为异步编程
4.在AJAX中可以使用异步编程

同步异步案例理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//案例一
var count = 0;
window.setTimeout(function () {
count++;
console.log(count);//后输出=>1 1000ms后
}, 1000);
console.log(count); //先输出=>0
//案例二
var count = 0;
window.setTimeout(function () {
count++;
console.log(count);//后输出=>1 不会立马执行,需要等待一段时间 谷歌:5~6ms IE:10~13ms
},0);
console.log(count); //先输出=>0
//案例三
var count = 0;
window.setTimeout(function () {
count++;
console.log(count); //不输出:因为线程一直被死循环占用,定时器需要一直等待着
},1000);
console.log(count); //先输出=>0
while(1){
//死循环
}
//案例四
window.setTimeout(function () {
console.log('a'); //再输出a
},10);
window.setTimeout(function () {
console.log('b'); //先输出b 因为在等待队列中是按时间排序的 时间短的先执行
},6);
var i=0;
while(i<1000000000){
i++;
}

AJAX中的同步与异步编程

AJAX中的同步:当AJAX任务开始时(xhr.send),一直需要到 READY STATE===4的时候任务才结束,才可以执行下一个任务
AJAX中的异步:当AJAX任务开始时(xhr.send),不需要等待READY STATE===4,期间可以执行其他任务,当READY STATE===时,再做相关操作

AJAX中的三部曲

1
2
3
4
5
6
7
8
9
10
var xhr=new XMLHttpRequest();
xhr.open("GET","/list",true);
/*
xhr.onreadystatechange=function(){
if(xhr.readystate===4&&xhr.status===200){
......
}
}
*/
xhr.send(null);//只有send之后AJAX任务(向服务器发送请求)才开始

AJAX中案例理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//案例一
var xhr=new XMLHttpRequest(); //readyState===0
xhr.open("GET","./a.json",true); //readyState===1
xhr.onreadystatechange=function(){ //绑定事件
console.log(xhr.readyState); //输出: 2 3 4
}
xhr.send(null); //任务开始 1->2->3->4

//案例二
var xhr=new XMLHttpRequest(); //readyState===0
xhr.open("GET","./a.json",false); //readyState===1
xhr.onreadystatechange=function(){ //绑定事件
console.log(xhr.readyState); //输出:4 (同步) 当请求结束 readyState==4时才输出 ajax本身是异步方法 (xhr保存开始时值1,当任务结束时值为4 状态码由1->4 输出4)
}
xhr.send(null); //任务开始 1->2->3->4

//案例三
var xhr=new XMLHttpRequest(); //readyState===0
xhr.open("GET","./a.json",true); //readyState===1
xhr.send(null); //任务开始 1->2->3->4
xhr.onreadystatechange=function(){ //绑定事件
console.log(xhr.readyState); //输出:2 3 4 (异步->不需要等待状态码为4 ->直接执行以下任务)
}

//案例四
var xhr=new XMLHttpRequest(); //readyState===0
xhr.open("GET","./a.json",false); //readyState===1
xhr.send(null); //任务开始 1->2->3->4
xhr.onreadystatechange=function(){ //绑定事件
console.log(xhr.readyState); // 无输出 (同步->状态码已为4时才添加事件->状态码不再改变触发事件->无输出)
}

获取服务器时间

状态码(readyState)为2时就需进行的操作(需异步)  =>如获取响应头中的服务器时间(Date)=> 可应用于电商网站倒计时抢购(若用客户端时间则用户可更改客户端时间) 
虽状态码为4时可获取服务器响应头中的时间,但状态码从2->3->4占大量时间 当状态码为2时获取可节省时间 减小时间误差 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var xhr = new XMLHttpRequest(); //readyState===0
xhr.open("HEAD", "./a.json", true); //readyState===1
xhr.setRequestHeader("H51806","fang"); //客户端设置请求头信息到a.json上->服务器端获取 (需写在open方法后)
xhr.timeout="1000";//设置AJAX请求的超时时间(若为同步编程,请求时间超过设置时间时放弃请求,执行下列任务)
/*
常用HTTP方法:
GET:一般用于从服务器获取数据(给服务器数据少,获取数据多,此方法最常用)->问号传参
POST:一般用于推送数据给服务器(给服务器多,获取少) ->请求主体传参
PUT:一般用于给服务器增加资源文件(上传图片功能)
DELETE:一般用于从服务器删除资源文件
HEAD:一般用于获取服务器响应头信息
这些请求方式不管是哪一种都可以向服务器获得或者传递数据,且从本质意义上无区别,只是行业内被开发者人约定俗成了各自不同的用处,并非标准。
*/
xhr.onreadystatechange = function () { //绑定事件
if (xhr.readyState === 2) {
// xhr.getResponseHeader=>客户端获取服务器的响应头信息
var time = xhr.getResponseHeader("Date");
console.log(time); //输出的为格林尼治时间(GMT)
console.log(new Date(time)); //输出为中国标准时间(GMT+0800)
}
}
xhr.send(null);
Fang Zhen wechat
有事微信联系~
我滴要饭の账号(💚一分也是爱💚)
-------------The End-------------
0%