JavaScript 事件循环（1） —— 从 setTimeout 说起

转变认知

setTimeout 可能是很多前端工程师爱用的方法，它可以使得一段代码延迟执行，例如：

setTimeout(() => console.log('A'), 1000); // 在1秒后打印出'A'

不过我们的理解可能在某些时候遭遇挑战，假定有如下代码：

for (var i = 0; i < 1e9; i++) {
}
setTimeout(() => console.log('A'), 1000);

如果运行上述代码，你会发现等待的时间明显大于1秒，你可能会认为是前面的for循环执行需要一定的时间，setTimeout需要等待前面的任务执行完毕，所以大于1秒，如果我们把for和setTimeout调换一下位置，应该就可以了：

setTimeout(() => console.log('A'), 1000);
for (var i = 0; i < 1e9; i++) {
}

接着运行上面的代码，你会发现和之前一样，我们还是得等待1秒以上的时间才看到A被打印出来，甚至，我们可以试试看下面的代码：

setTimeout(() => console.log('A'), 0); // 0秒后就打印字母A，这下总该立即打印出来了吧
for (var i = 0; i < 1e9; i++) {
}

不过事与愿违，我们看到此时字母A还是在明显大于1秒后才被打印出来，到底发生了什么呢？

首先我们要纠正一下自己对于 setTimeout 的感性认识：setTimeout 的第二个时间参数x，并不一定能保证第一个参数（回调函数）在经过x的时间后立即被执行