事件队列内的 JavaScript 函数未按预期移至调用堆栈

Question

我创建了两个 JS 程序来测试 JavaScript 调用堆栈、事件队列和计时器请求处理程序异步 API 的性质。

场景#1。

function logFirst(){
	console.log('First');
}

function logThird() {
	for (var i = 0; i <= 999999999; i++) {
		if (i == 999999999) {
			console.log("Third");
		}
	}
}

logFirst();	//first sync function

setTimeout(function() {
	console.log('Second');
}, 0);

logThird();	//painfully slow sync function called

该程序首先执行，然后继续遇到 setTimeout，这是一个异步任务。由于此任务是异步的，因此它由浏览器的 Timer Handler API 处理，该 API 执行 0 秒的计时器，然后将传递给 setTimeout 的匿名回调函数放入浏览器的事件队列中。

但是在这一切发生之前，第三个函数，即一段阻塞代码 logThird() 已经被调用。由于迭代需要大量时间才能完成，因此调用堆栈很繁忙。在最后一次迭代中，“Third”被打印到控制台。

当 logThird() 执行完毕后，调用堆栈变得空闲，事件队列中的回调现在被推送到调用堆栈并执行。

场景#2。我创建了两个阻塞类型的函数，如下所示:

function logFirst(){
	console.log('First');
}

function logThird() {
	for (var i = 0; i <= 999999999; i++) {
		if (i == 999999999) {
			console.log("Third");
		}
	}
}

function logFourth() {
	for (var i = 0; i <= 999999999; i++) {
		if (i == 999999999) {
			console.log("Fourth");
		}
	}
}

logFirst();	//first sync function
setTimeout(function() {	// an async task
	console.log('Second');
}, 0);
logThird();		//painfully slow sync function called

//isn't the call stack free at this point in time?

logFourth();	//another painfully slow sync function called

然后，我运行此代码，假设在 logThird 完成执行之后且在 logFourth 被推送到调用堆栈之前调用堆栈为空。所以“Second”应该被打印在第三个。但它是最后打印的。

(请在全屏模式下运行这两个代码片段以便能够看到 JS 控制台输出)

为什么异步回调没有被插入调用堆栈？

Answer 1

The call stack would be empty after logThird has finished executing and before logFourth has been pushed to the call stack

不，仍然有全局执行上下文(堆栈框架)运行您的脚本，并通过调用它实际上将 logFourth 压入堆栈。如果没有这样的东西(诚然，这不是一个函数执行上下文)，则脚本的每个语句都必须经过事件循环本身。