(这问题保懂吗?我能让你看没用的博客吗)
1、同步和异步任务
首先要搞清楚哪些是同步任务,哪些是异步任务。
同步任务:
会竟然有序依次向下执行的,例如console,条件判断语句,循环语句等等。
异步任务:
分为宏任务和微任务,宏任务会被添加到宏任务队列,微任务添加到微任务队列。
(1)宏任务:事件处理函数,定时器,ajax请求,script标签
(2)微任务:promise实例的then方法,await关键字
2、宏任务队列和微任务队列
还要明白任务队列分为宏任务队列和微任务队列,以及他们是按什么顺序执行队列中的任务。
宏任务队列:
解析js时,将解析到的宏任务添加至宏任务队列,
但宏任务队列的执行是没有顺序之分的,哪个任务先调用完成就执行哪个任务,
比如有一个5秒的定时器先加入进来的,但是有后加入进来一个2秒的定时器,那么2秒的定时器先调用完成,就先执行,所以是无序的
微任务队列:
将解析到的微任务依次添加到微任务队列的后排,在执行时按顺序依次执行,
说人话,谁先找到加入进来的,执行的时候谁先出去
3、同步任务、微任务和宏任务的执行流程
事件循环:
在解析js代码时,将同步任务,宏任务,微任务划分出来的这个过程,说人话,把这三种代码找出来分成三堆儿,我要一堆儿一堆儿吃
先要了解一个执行顺序,同步任务---微任务---宏任务
具体流程:
- 解析script标签开始第一次事件循环,先执行同步任务再执行微任务,找到宏任务会把宏任务丢进宏任务队列中,执行完第一次事件循环的同步任务和微任务,开始去宏任务队列中找先调用完成的宏任务,解析这个宏任务,开始第二次事件循环
- 第二次(同步任务---微任务---宏任务丢进队列中)
- 第n次(同步任务---微任务---宏任务丢进队列中)
光听我说还是不易理解,直接给你上图上代码,还不懂我倒立敲两斤代码
console.log(1)
setTimeout(function () {
console.log(2)
new Promise(function (resolve) {
console.log(3)
resolve()
}).then(function () {
console.log(4)
})
})
new Promise(function (resolve) {
console.log(5)
resolve()
}).then(function () {
console.log(6)
})
setTimeout(function () {
console.log(7)
new Promise(function (resolve) {
console.log(8)
resolve()
}).then(function () {
console.log(9)
})
})
console.log(10)
//1 5 10 6 2 3 4 7 8 9