一、事件循环的定义
JavaScript
事件循环是一种机制,用于处理异步事件和回调函数。
它是JavaScript
运行时环境的一部分,负责管理事件队列和调用栈。
二、事件循环的基本原理
当JavaScript代码执行时,所有同步任务都会被立即执行,而异步任务则会被放入事件队列中。
当所有同步任务执行完毕后,事件循环会从事件队列中取出一个任务,并将其放入调用栈中执行。
如果队列为空,JavaScript会等待新的任务加入队列。
当该任务执行完毕后,事件循环会再次从事件队列中取出下一个任务,并重复这个过程。
2.1、事件循环的执行过程
同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的,同步的。比如:我们要烧水煮饭,等水开了(10分钟后),再去切菜,炒菜
异步:你在做一件事情时,因为这件事会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如烧水的10分钟内,去切菜,炒菜
同步任务:在主线程上排队执行任务,只有前一个任务执行完毕,才能执行后一个任务
异步任务:不进入主线程,而是进入"任务队列"的任务
2.2、宏任务&微任务
异步任务又分为宏任务和微任务
1、宏任务包括setTimeout、setInterval、I/O操作等。
2、微任务包括Promise、MutationObserver等。
当事件循环从事件队列中取出一个任务时,它会先执行所有微任务,然后再执行一个宏任务。这个过程会一直重复,直到事件队列中的所有任务都被执行完毕。
下面是一个例子:
console.log("1");
setTimeout(function () {
console.log("2");
Promise.resolve().then(function () {
console.log("3");
});
}, 0);
Promise.resolve().then(function () {
console.log("4");
});
console.log("5"); //1 5 4 2 3
执行顺序:
- 执行第一个console.log,输出1。
- 执行setTimeout,将其回调函数放入宏任务队列中。
- 执行Promise.resolve().then,将其回调函数放入微任务队列中。
- 执行第二个console.log,输出5。
- 当前任务执行结束,执行微任务队列中的所有任务,输出4。
- 执行宏任务队列中的第一个任务,即setTimeout的回调函数,输出2。
- 执行Promise.resolve().then的回调函数,输出3。
需要注意的是,微任务和宏任务的执行顺序是固定的,即先执行所有微任务,再执行宏任务。因此,如果在一个宏任务中产生了新的微任务,那么这些微任务会在下一个宏任务执行之前执行。
下面是一个例子:
console.log("1");
setTimeout(function () {
console.log("2");
Promise.resolve().then(function () {
console.log("3");
});
}, 0);
Promise.resolve().then(function () {
console.log("4");
setTimeout(function () {
console.log("5");
}, 0);
});
console.log("6");
// 输出结果为:1 6 4 2 3 5
执行顺序:
- 执行第一个console.log,输出1。
- 执行setTimeout,将其回调函数放入宏任务队列中。
- 执行Promise.resolve().then,将其回调函数放入微任务队列中。
- 执行第三个console.log,输出6。
- 当前任务执行结束,执行微任务队列中的所有任务,输出4。
- 执行宏任务队列中的第一个任务,即setTimeout的回调函数,输出2。
- 执行Promise.resolve().then的回调函数,将setTimeout的回调函数放入宏任务队列中。
- 当前任务执行结束,执行微任务队列中的所有任务,输出3。
- 执行宏任务队列中的第一个任务,即setTimeout的回调函数,输出5。