Question

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

第一个setTimeout
第二个for循环

最后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');

但是没有，订单变成：

第一个for循环
第二console.log
最后是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引擎的工作原理，请阅读this。这是非常基本的，对您有很大帮助。

Answer 2

setTimeout在计时器到期后运行您提到的作为匿名函数的代码。就您而言，它执行：

function(){
    console.log('setTimeout executes');
}

这不会阻止javascript的正常运行。

要获得所需的流程，您需要这样做：

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

要更好地理解这一点，可以使用以下可视化工具：http://latentflip.com/loupe

Answer 3

如果您想知道原因，setTimeout是异步的。 Javascript仅保证在您指定的时间之前不会调用此回调，但不能保证它将在之后立即发生。它将调用放置在事件队列中（我认为），并且如果其中还有其他内容，则此回调将不得不等待。

您可以在《您不知道JS》一书中找到更多的知识，您可以找到here，阅读异步部分。

Answer 4

由于进入setTimeout的时间长短，即使是0ms，它也总是要花一些时间才能执行，因此任何其他足够小的代码段都将在setTimeout调用之前运行。

Answer 5

setTimeout（function（）{...}，0）仅在当前调用堆栈完成执行后将代码排队运行。这对某些事情很有用。

所以是的，它是异步的，因为它中断了同步流，但是实际上并不会/在单独的线程上执行。如果您的目标是后台处理，请查看网络工作者。还有一种使用iframe进行后台处理的方法。

Answer 6

您尝试交换

的位置

console.log('setTimeout executes');

和

for(var i=0;i<10000;i++){
    console.log('inside for loop');
}

setTimeout在javascript中的for循环后执行

6 个答案: