javascript的异步执行顺序---管中窥豹

有一个经典例子：

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}

介绍一下，setTimeout会在若干毫秒的延时后执行一个函数（等待其它代码执行完毕）。

好吧，看一下结果：

10
10
10
10
10
10
10
10
10
10

很多JavaScript程序员对这种行为已经很熟悉了，但如果你很不解，你并不是一个人。 大多数人期望输出结果是这样：

0
1
2
3
4
5
6
7
8
9

实际上，我们传给setTimeout的每一个函数表达式实际上都引用了相同作用域里的同一个i。
让我们花点时间思考一下这是为什么。 setTimeout在若干毫秒后执行一个函数，并且是在for循环结束后。 for循环结束后，i的值为10。 所以当函数被调用的时候，它会打印出 10！

一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时i的值：

for (var i = 0; i < 10; i++) {
    // capture the current state of 'i'
    // by invoking a function with its current value
    (function(i) {
        setTimeout(function() { console.log(i); }, 100 * i);
    })(i);
}

这种奇怪的形式我们已经司空见惯了。 参数 i会覆盖for循环里的i，但是因为我们起了同样的名字，所以我们不用怎么改for循环体里的代码。

这是参考：https://www.tslang.cn/docs/handbook/variable-declarations.html
这里就要问明明写在里面的，为什么还是要用立即执行函数的写法才能让他真的符合看上去那样在for循环里面乖乖执行每次获取不同的 i 呢。

JS的异步执行顺序是：
先同步后异步

异步任务队列的执行顺序是：
先微任务microtask队列，再宏任务macrotask队列

微任务包括 process.nextTick ，promise ，MutationObserver。
宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

所以是settimeout()开启了宏任务，在for循环这个同步结构执行结束之后，获取到了i ，程序结构上是嵌套在for里面的，仍然会有10个宏任务生成，但是此时的 i 变量已经是for结束之后的 i=10 了。