开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
同步和异步
- 同步：立即放入js主线程中执行，并原地等待结果
- 异步：先在宿主环境（浏览器/Node），不用原地等待结果，不会阻塞主线程，异步结果在将来执行
事件循环
event loop：执行栈中执行完同步任务后循环地向任务队列中获取任务执行的过程
console.log(1);
setTimeout(() => {
console.log(2);
}, 0)
console.log(3); // 1 3 2
- 这是开始的状态
- 同步任务进执行栈，异步任务进入宿主环境
- 执行栈中执行同步任务，宿主环境开始计时，计时完后进入任务队列
- 执行栈中执行完所有的同步任务之后，再不停的去任务队列中获取任务
宏任务和微任务
异步任务又分成宏任务和微任务
- 宏任务由宿主环境发起：script、事件、Ajax/fetch、setTimeout、setInterval
- 微任务是由js引擎发起的：Promise （Promise本身是同步的，then/catch是异步的）
任务之间的关系和优先级就可以总结
举个栗子🍪
console.log(1);
setTimeout(() => {
console.log(2);
}, 0)
const p = new Promise((res, rej) => {
console.log(3);
res(4);
console.log(5);
})
p.then(res => {
console.log(res);
})
console.log(6);
// 1 3 5 6 4 2
异步例子
- 回调函数
setTimeout(() => {
console.log('回调函数内部');
}, 1000);
// 1秒之后执行打印不会影响主线程的执行
- 事件监听
element.addEventListener(event, function, useCapture);
// 监听事件发生再执行function，不会影响主线程的执行
- 发布/订阅
发布者发布消息给订阅者。订阅者再执行
- Promise对象
Promise的then和catch是异步
参考：
