蘑菇丁毕业设计网站,网站设计与实现毕业设计,wordpress 上一页 下一页,wap 网站 源码什么是事件循环
首先#xff0c; JavaScript是一门单线程的语言#xff0c;意味着同一时间内只能做一件事#xff0c;这并不意味着单线程就是阻塞#xff0c;而是实现单线程非阻塞的方法就是事件循环
在JavaScript中#xff0c;所欲任务都可以分为#xff1a;
同步任务…什么是事件循环
首先 JavaScript是一门单线程的语言意味着同一时间内只能做一件事这并不意味着单线程就是阻塞而是实现单线程非阻塞的方法就是事件循环
在JavaScript中所欲任务都可以分为
同步任务立即执行的任务同步任务一直会直接进入到主线程中执行异步任务异步执行的任务比如ajax网络请求setTimeout定时任务等等 从上面可以看到同步任务进入主线程即主执行栈异步任务进入任务队列主线程内的任务执行完毕为空会去任务队列中读取相应的任务推入主线程执行。上面的过程不断重复就叫事件循环
宏任务和微任务
异步任务还可以细分为微任务和宏任务
微任务
一个需要异步执行的函数执行时机主函数执行结束之后当前宏任务执行之前
常见的微任务有
Promise.thenMutationObserver监听指定DOM的变化Process.nextTickNode.js
常见的宏任务有
setTimeout/setIntervalpostMessage、MessageChannelUI rendering/UI事件下轮事件循环执行之前Script外层的同步代码setImmediate、I/ONode.js
宏任务更像在系统层面上执行的任务微任务更像在代码层面执行的任务 按照这个顺序它的执行机制是
执行一个宏任务如果遇到一个微任务就将它放到微任务的事件队列中当前宏任务执行完成后会查看微任务的事件队列然后将里面的所有微任务依次执行完成
看一下的一个示例
console.log(1)
setTimeout((){console.log(2)
}, 0)
new Promise((resolve, reject){console.log(new Promise)resolve()
}).then((){console.log(then)
})
console.log(3)/*** 遇到console.log(1) 直接打印* setTimeout 是宏任务 放到宏任务队列里面* Promise 中的代码是直接打印的 所以执行console.log(new Promise)* then 是微任务 放到微任务队列中* console.log(3) 这直接打印* 开始执行异步任务* 首先执行微任务 then 中的代码 打印then* 执行完微任务执行宏任务setTimeout中的代码 打印2 **/打印的结果是1 new Promise 3 then 2
async 与 await
async 是异步的意思await可以理解为async wait可以理解async就是用来声明一个异步方法而await是用来等待异步方法执行
async async 修饰的函数返回的是一个 Promise 对象下面的两种方法是等效的
function f() {return Promise.resolve(TEST);
}// asyncF is equivalent to f!
async function asyncF() {return TEST;
}await 正常情况下await 命令后面是一个 Promise 对象返回该对象结果如果不是Promise对象就直接返回对应的值
async function f(){// 等同于// return 123return await 123
}
f().then(v console.log(v)) // 123不管await后面跟着的是什么await都会阻塞后面的代码
async function fn1 (){console.log(1)await fn2()console.log(2) // 阻塞
}async function fn2 (){console.log(fn2)
}console.log(3)
fn1()上面的例子中await 会阻塞下面的代码运行先执行async外面的同步代码同步代码执行完成后再回到async函数中执行await之后的代码也就是阻塞的代码
所以上述输出结果为3 1 fn2 2
流程分析
通过对上面的了解我们对JavaScript的各个场景的执行顺序有了大致的了解
请看以下的代码
async function async1() {console.log(async1 start)await async2()console.log(async1 end)
}
async function async2() {console.log(async2)
}
console.log(script start)
setTimeout(function () {console.log(settimeout)
})
async1()
new Promise(function (resolve) {console.log(promise1)resolve()
}).then(function () {console.log(promise2)
})
console.log(script end)结果是script start - async1 start - async2 - promise1 - script end - async1 end - promise2 - settimeout
分析过程
/*** 1.遇到async1async2函数定义不用执行* 2.执行 console.log(script start) - 输出script start* 3.setTimeout 是宏任务 放到宏任务里面* 4.执行async1()* 5.进入执行async1 里执行 console.log(async1 start) - 输出async1 start* 6.遇到await 执行 async2然后阻塞await后面的代码* 7.进入执行async2 里执行 console.log(async2) - 输出async2* 8.遇到Promise 执行 console.log(promise1) - 输出promise1* 9.执行console.log(script end) - 输出script end* 10.开始执行异步任务* 11.执行微任务await后面的代码 console.log(async1 end) - 输出async1 end* 12.执行微任务then里面的代码 console.log(promise2) - 输出promise2* 13.执行宏任务setTimeout里面的代码 console.log(settimeout) - 输出settimeout
**/
