Javascript的同步、异步、回调执行顺序

最新推荐文章于 2025-07-12 14:36:18 发布

原创最新推荐文章于 2025-07-12 14:36:18 发布 · 523 阅读

1 ·

CC 4.0 BY-SA版权

常见面试题专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了JavaScript中setTimeout函数的执行机制，通过一个经典案例解释了为何在循环中使用setTimeout会得到意料之外的结果，揭示了同步与异步任务的执行顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做笔试题的时候，遇到一个很经典的题目，关于setTimeout的输出结果，先来看一道题目：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
console.log(i);

那么输出的结果是什么呢？
第一种可能的答案：0 1 2 3 4 5
第二种可能的答案：5 5 5 5 5 5 （后面每个5隔一秒输出）
显然第二种结果是正确的。
首先看一下一个口令或者说方法：
同步优先、异步靠边、回调垫底
用公式表达就是：同步 => 异步 => 回调
现在根据这个口令来分析一下结果：
1）for循环和循环体外部的console是同步的，所以先执行for循环，再执行外部的console.log。（同步优先）
2）for循环里面有一个setTimeout回调，他是垫底的存在，只能最后执行。（回调垫底）
那么，为什么我们最先输出的是5呢？
for循环先执行，但是不会给setTimeout传参（回调垫底），等for循环执行完，就会给setTimeout传参，而外部的console打印出5是因为for循环执行完成了。