setTimeout 在 JavaScript 中的 for 循环之后执行

Question

setTimeout如果我们在循环之前运行for（大约需要 5-8 秒）并在 chrome 开发控制台中运行它，则执行顺序应该是

1. 第一的setTimeout
2. 第二个for循环

3. 最后console.log

   setTimeout(function(){
       console.log('setTimeout executes');
   },1000);
   for(var i=0;i<10000;i++){
       console.log('inside for loop');
   }
   console.log('after For Loop');
   

但事实并非如此，顺序变成了：

1. 第一个for循环
2. 第二console.log
3. 最后setTimeout

为什么会发生这种情况？

Answer 1

JS 是同步的。因此，所有同步代码首先完成，所有异步都进入单独的线程，它们可能会更早完成，但必须等到所有同步代码完成。

setTimeout(function(){
    console.log('setTimeout executes');
},1000); // this function go async in separate thread
for(var i=0;i<10000;i++){ 
    console.log('inside for loop'); // sync
}
console.log('after For Loop'); // sync
// after all sync code async result will be called
// console.log('setTimeout executes'); will happen here

如果您想全面了解 JS 引擎的工作原理，请阅读本文。这是非常基础的并且有很多帮助。