JS执行顺序

关系图

graph LR
js任务 --> A(同步任务/非耗时任务)
js任务 --> B(异步任务/耗时任务)
B --> C(宏任务:异步ajax请求  setTimeout  setInterval  文件操作  其他)
B --> D(微任务:Promise.then/catch/finally  process.nextTick  其他)

事件循环执行顺序

同步任务 -> 微任务 -> 宏任务

常见宏任务

• script(外层同步代码)
• setTimeout/setInterval
• setImmediate(nodeJs)
• I/O
• UI事件
• postMessage

常见微任务

• promise
• process.nextTick(nodeJs)
• Object.observe
• MutaionObserver

举例

    console.log('开始执行');
    setTimeout(function () {
      console.log('1 setTimeout里输出');
      new Promise(function (resolve) {
        console.log('1 setTimeout里promise输出');
        resolve('1 setTimeout里promise里then输出')
      }).then((res) => { console.log(res); })
    })
    new Promise(function (resolve) {
      console.log('promise输出');
      resolve('promise里then输出')
    }).then((res) => { console.log(res); })
    setTimeout(function () {
      console.log('2 setTimeout里输出');
      new Promise(function (resolve) {
        console.log('2 setTimeout里promise输出');
        resolve('2 setTimeout里promise里then输出')
      }).then((res) => { console.log(res); })
    })
    
    // 输出结果
    开始执行
    promise输出
    promise里then输出
    1 setTimeout里输出
    1 setTimeout里promise输出
    1 setTimeout里promise里then输出
    2 setTimeout里输出
    2 setTimeout里promise输出
    2 setTimeout里promise里then输出