浏览器中JS事件循环机制（面试题解）

浏览器环境下JS的事件循环机制:

function foo() {
  setTimeout(foo, 0); // 是否存在堆栈溢出错误?
}; 

浏览器的主要组件包括调用堆栈，事件循环，任务队列和Web API。像setTimeout，setInterval和Promise这样的全局函数不是JavaScript的一部分，而是 Web API 的一部分。

JS调用栈是后进先出(LIFO)的。引擎每次从堆栈中取出一个函数，然后从上到下依次运行代码。每当它遇到一些异步代码，如setTimeout，它就把它交给Web API。因此，每当事件被触发时，callback 都会被发送到任务队列。

事件循环不断地监视任务队列，并按它们排队的顺序一次处理一个回调。每当调用堆栈为空时，Event loop获取回调并将其放入堆栈中进行处理。请记住，如果调用堆栈不是空的，则事件循环不会将任何回调推入堆栈。

前面提到的问题就有了回答：

步骤

1. 调用 foo()会将foo函数放入调用堆栈。
2. 在处理内部代码时，JS引擎遇到setTimeout。
3. 然后将foo回调函数传递给WebAPIs并从函数返回，调用堆栈再次为空
4. 计时器被设置为0，因此foo将被发送到任务队列。
5. 由于调用堆栈是空的，事件循环将选择foo回调并将其推入调用堆栈进行处理。

进程再次重复，堆栈不会溢出。