20-事件环分析训练

该训练是为了面试的无奈之举哈哈

例子1

// 案例一
Promise.resolve().then(() => {
  // promise1
  console.log('p1');
  setTimeout(() => {
    // setTimeout2
    console.log('s2');
  }, 0);
});

setTimeout(() => {
  // setTimeout1
  console.log('s1');
  Promise.resolve().then(() => {
    // promise2
    console.log("p2");
  })
}, 0);
// 结果 -> p1 s1 p2 s2

• script
• 1. promise1加入微任务
• 2. setTimeout1加入宏任务
• 3. promise1执行 p1 setTimeout2加入宏任务
• 4. setTimeout1执行 s1, promise2 加入微任务
• 5. promise2执行 p2
• 6. setTimeout2 执行 s2

例子2

console.log(1);

setTimeout(() => {
  console.log(2);
}, 10)

new Promise(function(resolve, reject) {
  console.log(3);
  resolve("");
  console.log(4);
}).then(res => {
  console.log(5);
})
console.log(6);
// -> 1  3  4  6 5 2

• script
• 1
• setTimeout回调放入 宏任务
• promise(executor执行器)里面是同步的,执行 3 4
• promise.then 放入 微任务
• 6
• promise.then执行 5
• setTimeout回调执行 2

例子3

console.log(1);

setTimeout(() => {
  console.log(2);
}, 10)

new Promise(function(resolve, reject) {
  console.log(3);
  console.log(4);
}).then(res => {
  //没有resolve这段就没有放入微任务里面去了
  console.log(5);
})
console.log(6);
// => 1  3  4  6 2

例子4

• async 函数 默认返回一个Promise实例
• await 必须在async中使用
• test() -> promise对象
• await test() -> test().then(...)

let res = function () {
  console.log(1);
  return new Promise((resolve, reject) => {
    console.log(2);
    resolve(4);
  })
}

new Promise(async(resolve, reject) => {
  console.log(3);
  let test = await res();
  // @1
  console.log(test); // 4
})

console.log(5)

new Promise((resolve, reject) => {
  console.log(6);
})
// => 3 1 2 5 6 4

• 1. script
• 2. function -> test
• 3. 3
• 4. await test() -> test().then(...) -> 1 2 -> @1 放入到微任务中
• 5. 5
• 6. 6
• 7. @1执行 4

例子5

• 用户交互事件的问题
  • 自动取调用时候,整体调用事件环
  • 手动添加,一个执行玩了,在执行另一个

const oBtn = document.getElementById('btn');
// => 宏任务中,事件处理函数 -> 回调
// @1
oBtn.addEventListener('click', () => {
  console.log(1);
  // @p1
  Promise.resolve('m1').then(str => {
    console.log(str);
  })
}, false);
// @2
oBtn.addEventListener('click', () => {
  console.log(2);
  //@p2
  Promise.resolve('m2').then(str => {
    console.log(str);
  })
}, false);

oBtn.click();
// 1 2 m1 m2
// 点击button -> 1 m1 2 m2

• script
• 自动调用的时候他们是个整体
• @1 cb 放入宏任务
• @2 cb 放入宏任务
• oBtn.click();
• 1 -> @p1 放入微任务
• 2 -> @p2 放入微任务
• @p1 执行 -> m1
• @p2 执行 -> m2
• 手动点击的时候,他们是单体的，一个个来
• @1 cb 放入宏任务
• 执行@1
• 1 -> @p1放入微任务
• @p1 执行 -> m1
• @2 cb 放入宏任务
• 执行@2
• 2 -> @p2放入微任务
• @p2 执行 -> m2