js 执行流程
例子1
// es6 内部是一个微任务 Promise.resolve().then(() => { console.log("Promise1"); setTimeout(() => { console.log("setTimeout2"); }, 0); }); setTimeout(() => { console.log("setTimeout1"); Promise.resolve().then(() => { console.log("Promise2"); }); }, 0);
例子2
事件点击跟直接触发 addEventListener 是宏任务
button.addEventListener("click", () => { console.log("Listener1"); Promise.resolve().then(() => { console.log("Promise1"); }); }); button.addEventListener("click", () => { console.log("Listener2"); Promise.resolve().then(() => { console.log("Promise2"); }); });
直接点击按钮：会有两个宏任务进入队列，然后一次根据js执行流程去走，输出 Listener1 Promise1 Listener2 Promise2
如果直接执行 button.click()，相当通两个同时执行，会输出 Listener1 Listener2 Promise1 Promise2
例子3
async function async1() { console.log("async1 start"); // 浏览器识别async+await，await 后面跟的是 promise 的话默认就会直接调用这个 promise 的 then 方法 // async2 会立即执行，相当于async2().then(() => {console.log("async1 end")}) await async2(); console.log("async1 end"); } async function async2() { console.log("async2"); } console.log("script start"); setTimeout(() => { console.log("setTimeout"); }, 0); async1(); new Promise((resolve, reject) => { 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]
