js 异步执行_一段JavaScript代码是如何执行的

js事件循环

当我们执行一行js代码时,如果是同步任务,就把它直接放到执行栈里面去执行,如果是异步任务,会把它放到一个异步的任务队列中,等待同步任务执行完,然后再从异步任务中读取异步任务.

异步任务

异步任务又分为 “宏任务” 和 “微任务”.

宏任务是宿主环境提供的. 例如setTimeout()以及正常的js脚本.

微任务是由语言标准提供的. 像平时用的 promise,nextTick

异步任务队列

异步任务队列里又有 “宏任务队列” 和 “微任务队列” ,如果同步任务执行完了,然后会先去执行微任务,会把所有的微任务执行完,才会去执行新的一轮宏任务.

测试代码

// 同步任务console.log("script start");// 异步任务 --- 宏任务setTimeout(() => {  console.log("setTimeout1");}, 0);// 异步任务 --- 微任务 (如果是 new Promise()则是同步任务, 切记)Promise.resolve()  .then(function () {    console.log("promise1");  })  .then(function () {    console.log("promise2");  });// 异步任务---宏任务setTimeout(() => {  console.log("setTimeout2");}, 0);// 同步任务console.log("script end");

结果调试

执行console.log("script start"); 因为它是同步代码所以立即打印 script start

执行到setTimeout()时,因为它不是一个同步任务,所以会先将它放到异步任务队列中,等待同步任务执行结束才会执行.

执行到console.log("script end");时,因为是同步任务,所以立即输出 “script end”

现在同步任务已经处理完成, 接着就是处理异步任务. 因为 “宏任务” 执行顺序优先于 “微任务”, 所以会先去执行 Promise

异步队列宏任务处理完, 接着 去处理异步队列的 “微任务”

执行结果

script startscript endpromise1promise2setTimeout1setTimeout2