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

Question

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

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引擎的工作原理，请阅读此内容 。 这是非常基本的，对您有很大帮助。

Answer 2

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

您可以在“您不知道JS”书中找到更多知识，可以在这里找到并阅读异步部分。

Answer 3

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 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');
}