JS的执行机制

一. 什么是同步与异步

(1) 同步

按顺序执行

//例子:
console.log(1)
console.log(2)
console.log(3)
1  2  3

(2) 异步

先执行一部分,然后等待结果,等拿到结果之后,再执行另一部分
1.定时器
2.ajax
3.读取文件

1000 100 10 3 2 1
解释:同步程序完成后,后执行异步程序

//例子1:
console.log(1)
setTiemout(function(){console.log(2)},0)
setTiemout(function(){console.log(3)},0)
setTiemout(function(){console.log(4)},0)
console.log(5)

//打印出  1 5 2 3 4

//例子2:
setTiemout(function(){console.log(1)},1000)
setTiemout(function(){console.log(2)},100)
setTiemout(function(){console.log(3)},10)

//打印出  321

二. 单线程

(1) js是单线程

一个任务完成之后,才能执行另外一个任务

不管定时器写几,也是在同步的代码完成之后,再执行异步的代码

for(var i = 0;i<2000;i++){
	console.log(1)
}
setTiemout(function(){console.log(2)},0)
setTiemout(function(){console.log(3)},0)
setTiemout(function(){console.log(4)},0)
console.log(5)

打印出  先输出2000个1,5 2 3 4
执行的时间很长

三. process.nextTick与setImmediate方法

(1) process.nextTick

process.nextTick方法只能在node中运行,在同步代码执行完成之后,异步代码执行之前完成的

//例子:
process.nextTict(()=>{
	console.log(1)
})
console.log(2)
setTiemout(function(){console.log(3)},0)
console.log(4)

执行顺序:2 4 1 3

(2) setImmediate

异步代码执行之后,执行setImmediate

//例子:
setImmediate(()=>{
	console.log(1)
})
process.nextTict(()=>{
	console.log(2)
})
console.log(3)
setTiemout(function(){console.log(4)},0)
console.log(5)

执行顺序:3 5 2 4 1

四.事件循环

(1) 运行栈

同步的代表会放到运行栈中执行

(2) 任务队列

异步

(3) 事件循环

检测任务队列里面有没有东西,如果有一个任务,他就执行,如果有多个任务,他就会按顺序执行

注解:
定时器不是到点执行,而是到点了之后插到任务队列里头,而任务队列什么时候执行,那需要看运行栈里面是否执行完,运行栈执行完了,要看任务队列里前面有没有任务,有任务的话,需要执行完,才执行刚刚插入的定时器里头的任务,所以为什么定时器为0还没执行他的原因

//例子
setImmediate(()=>{
	console.log(1)
})
process.nextTict(()=>{
	console.log(2)
})
console.log(3)
setTiemout(function(){console.log(4)},0)
setTiemout(function(){console.log(5)},1000)
setTiemout(function(){console.log(6)},0)
console.log(7)
==执行顺序:
1.同步
2.nextTick
3.异步
4.setImmediate(当前事件循环结束执行)  
每次事件循环都看任务队列里面有没有东西,有就执行==

执行顺序:3 7 2 4 6 1 5

执行顺序:
1.同步
2.process.nextTick
3.异步
4.setImmediate(当前事件循环结束执行)
每次事件循环都看任务队列里面有没有东西,有就执行

五.宏任务和微任务

(1) 宏任务

计时器,ajax,读取文件

(2) 微任务

promise.then

执行顺序:
1.同步程序
2.process.nextTick
3.微任务
4.宏任务
5.setImmediate

//题目:
setImmediate(()=>{
	console.log(1)
})
console.log(2)
setTiemout(function(){console.log(3)},0)
setTiemout(function(){console.log(4)},100)
console.log(5)
new Promise((resolve)=>{
	console.log(6)//promise.then的这个6是同步代码
	resolve()
}).then(()=>{{
 console.log(7)
})
process.nextTict(()=>{
	console.log(8)
})

//执行顺序:2 5 6 8 7 3 1 4

六. promise和async函数

(1) promise函数

promise的基本概念:then的用法就是通过resolve传出来的 resolve传出来的值,是then里面的形参

以下案例解:就这样运行,他不会打印出2,因为new Promise函数里面会有一个resolve,只有调用了resolve才会执行then

let p = new Promise(()=>{
	console.log(1)//同步
})

p是promise对象,promise对象又一个then方法

p.then(()=>{
	console.log(2)//异步
})

修改上面案例

let p = new Promise((resolve)=>{
	console.log(1)//同步
	resolve('hello word')
})

p是promise对象,promise对象又有一个then方法

p.then((data)=>{
	console.log(data)//异步
})
//执行:打印出  1 hello word

//例子:
ajax.get('').then((res)=>{
//其实get方法他的返回值就是一个promise对象
})

ajax.get('')是怎么封装的,他会把一个获取到的远程数据通过resolve方法传出来,然后才能调用then()拿到这个数据
promise的基本概念:then的用法就是通过resolve传出来的
resolve传出来的值,是then里面的形参

(2) async函数

async函数调用之后,他的的返回值是promise对象, promise对象的then传过来的参数,就是return的值
可以理解为,async函数就是promise对象的简写

async function fun(){
	return 1
}
let a = fun()//fun是promise对象,要想拿到这个返回值1,则需要使用then方法
console.log(a)//打印出  Promise {: 1}

a.then((data)=>{
	console.log(data)//执行后,打印出1
})

async函数调用之后,他的的返回值是promise对象,promise对象的then传过来的参数,就是return的值
可以理解为,async函数就是promise对象的简写

async function fun(){
	return 1
}
这个写法可以换成

function fun(){
	return new Promise((resolve)=>{
		resolve(1)
	})
}
fun.then((data)=>{
	console.log(data)//执行后打印出  1
})

方法是一样的,只是async函数看上去会顺畅很多,代码不会写的太多

还可以将方法换成:
let p1 = new Promise((resolve)=>{
	resolve(1)
})
let p2 = new Promise((resolve)=>{
	resolve(2)
})

//获取到1,2的简写
async function fun(){
	let a = await p1;//a相当于 await 后面加一个promise对象.await+promise对象他就可以直接拿到resolve的值了,这就是async的用法,
	let b = await p2;
	console.log(a)//打印出1
	console.log(b)//打印出2
	
}

async函数里面可以加await,await后面可以加promise对象,然后就可以让异步的代码,写起来更像同步的代码

题目:
async function fun1(){
	let data = await fun2()
	console.log(data)//异步
}
async function fun2(){
	console.log(200)//同步的代码
	return 100
}
fun1()//打印出 200 100 

七. 测试题

console.log(1)
async function async1(){
	await async2()
	console.log(2)
}
async function async2(){
	console.log(3)
}
async1()
setTimeout(function(){
	console.log(4)
},0)
new Promise(resolve=>{
	console.log(5)
	resolve()
}).then(function(){
	console.log(6)
}).then(function(){
	console.log(7)
})
console.log(8)



执行顺序:1 3 5 8 2 6 7 4