2/21 个人理解的 JavaScript for 循环机制

写在前面

　　昨天我查资料写了一篇比较乱的博客来探究

　　为什么在某些情况下 Promise 失效的原因

　　起初以为只是 js 单线程没有控制好 Event Queue 里面各项异步任务的处理时间

　　但是最核心的问题就是 for 循环的机制

首先一段代码

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

　　这是大家 喜闻乐见 的一段代码，对于一些总结过的朋友，他们会说，当 for 循环中遇到了执行时间比较长的代码

　　for 循环会跳过这一段处理时间长的代码，等到 for循环结束才会运行这段代码

　　于是输出 3 3 3

　　那么时间很小呢？

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

　　怎么还是这样呢？

　　不应该是 0 1 2 吗

　　.......　　

　　但是这只是 var i = 0 全局作用域的情况

　　那么 let i = 0 呢

1 for(let i=0;i<3;i++){
2     setTimeout(function(){
3         console.log(i);
4     }, (i+1)*1000); 
5 }

　　这个时候输出却变成了这样

　　欸？不是前面说

　　for 循环会跳过这一段处理时间长的代码，等到 for循环结束才会运行这段代码

　　这个时候 i 不是应该是 3了吗

　　输出也应该是 3 3 3 阿

　　为什么会是这个样子呢，我们又再来看一下这个代码

for (let i = 0; i < 3; i++) {
                    setTimeout(function () {
                        console.log(i);
                    }, Math.random() * 10000)
                }

　　好家伙直接乱序了（大家可以试一下 var 的情况 )

　　输出结果

　　那好，为了不让他乱序我们加一个 Promise 怎么样？

 for (let i = 0; i < 3; i++) {
                    let timer = new Promise(function (resolve, reject) {
                        setTimeout(function () {
                            resolve(i); 
                        }, Math.random() * 10000)
                    })
                    timer.then((data) => {
                        console.log(data);
                    })
                }

　　好家伙为什么又炸了

　　有些朋友会觉得百思不得其解

　　但是我现存一个理论来解释这个东西当然并不是权威的解释只是我通过查资料推导出来的

　　我怕误人子弟如果您觉得这可能不是浪费时间的东西请您接着往下面看

js的运行机制

　我们要谈为什么会出现这样的情况的话，还是要扯到 js 的运行机制

　　js 是单线程的如果有很多任务是同步操作的话，上一个操作完成才会处理下一个

　　这无疑是开销巨大的

　　所以 js 采用了一些处理方式来适应单线程并对外看似是多线程协调工作：

　　js 把任务分为 异步任务 和 同步任务

　　异步任务会先注册一个函数但是不执行然后放入事件队列等到合适的时候进入主线程

　　同步任务会在主线程中先执行执行完了才会让处于事件队列的异步任务注册的的函数进行执行

　　当然如果您没有适当接触过js的运行机制的话您可能觉得 “这在说些什么”

　　在此我推荐一位大佬的文章

　　https://m.jb51.net/article/149358.htm

　　加之一位up主的视频来学习一下

　　https://www.bilibili.com/video/BV1kf4y1U7Ln

　　如果您看完或者多少有些了解过后请接着浪费时间往下看

　　如果按照视频里面的说法（这应该是一种精简总结过的结论 )

　　js 处理任务的时候有三部分

　　1. call back stack 调用栈

　　2. message queue 消息队列

　　3. micro-task queue 微任务队列

　　我的总结就是

　　同步任务就要先放到调用栈里面

　　而异步任务（ setTimeout ... fileReader.onload ) 就要先放到消息队列中

　　对于 Promise 这种就得放到微任务队列中（ ta 的级别高一点）

　　对于之前的第一段代码

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

　　如果按照视频里面总结过说的那样（没有宏任务微任务那么细致）

　　而且 var 作用全局作用域

　　我们的流程应该是这样

　　注意

　　对于这些操作我认为这也是同步任务（仔细想一想这句话）

　　所以流程

　　第一次循环

　　顺序执行，当遇到同步操作放入主线程 ( 调用栈）遇到异步操作 注册一个函数 然后放入消息队列（消息对列中的任务调入到调用栈的条件是 调用栈为空 && 任务时延结束 ）

　　接下来还是如此

　　此时应该是将注册过后的放在消息队列里面的异步操作的函数等待时延放入我们的调用栈中

　　因为这个时候栈不为空 i 最终还得加一个 1 i = 3

　　而且 var 声明的东西全局范围都能用并不是想 let 那些的“副本” 所以按照时延调入到栈中

　　依次下去因为时间间隙不是很大然后就像一次执行完了 3 3 3

　　同理对于第二个代码

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

　　其实

　　setTimeout ( fn ,0 ) 的含义是指定某个任务在主线程最早可得的空闲时间执行，意思是不用等待多少秒了，只要主线程内的同步任务执行完毕，栈为空，马上就执行

　　说明我们的 i ++ 的过程是一直在栈（主线程）里面运行的

　　而且注册的函数中的参数指的是 var i 意思是 i 最后的结果带入到我们注册的函数中

　　那么这次的输出也是 3 3 3

　　第三段代码

for(let i=0;i<3;i++){
    setTimeout(function(){
         console.log(i);
    }, (i+1)*1000); 
}

　　我们触类旁通

　　正如谈到 var 的时候一样，这个是个全局变量相当于只有一个内存空间我们操作一次就改变了ta

　　但是 let 不一样对他的操作只限定于局部作用域当我的新的循环开始相当于我又多了一个 let 像一个副本一样这两个 let 互不相同

　　如果这样那么怎么控制 let 的自增呢

　　其实是 js 引擎内部自己的事情他会记录 let 的改变情况

　　所以对于let 我们稍微改一下上面对于 var 操作的第三幅流程图

　　当我们将消息队列中的注册过的函数调入的时候

　　我们调用的不一样的 i

　　也有 i_3 但是 for 循环外面会报错因为作用于块找不到

　　结果

　　倒数第二个代码

for (let i = 0; i < 3; i++) {
        setTimeout(function () {
        console.log(i);
        }, Math.random() * 10000)
}

　　其实大家看到这里应该都会推了

　　我写一下最后的调入

　　 ( 这个是我试出来满足上面可能的情况）

　　然后是最后一个代码那个有 promise 的

for (let i = 0; i < 3; i++) {
                    let timer = new Promise(function (resolve, reject) {
                        setTimeout(function () {
                            resolve(i); 
                        }, Math.random() * 10000)
                    })
                    timer.then((data) => {
                        console.log(data);
                    })
                }

　　这个就要牵涉到 micro-task queue 了

　　首先提示一下 .then 也是异步操作也得放到 message queue 里面

　　于是第一次的循环应该是这个样子的