在for循环中运行setTimeout

先看一段代码

for (var i=0; i<10; i++) { 
    setTimeout(console.log(i), i*1000 );
    }
答案：0、1、2、3、4、5、6、7、8、9

再比较一段代码

for(var i=0;i<10;i++){
        setTimeout(function(){
         console.log(i);  
        },i*1000);
    }
答案：10、10、10、10、10、10、10、10、10、10

发现什么奇怪的问题了吗？
为什么第二段代码的结果是10个10呢？

原因是for循环中使用setTimeout涉及到了异步机制。说到异步机制那就要说一下JS的运行机制：

JS是单线程环境，也就是说代码的执行是从上到下，依次执行。也就是同一个时间只能做一件事。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。JavaScript将所有任务分成两种，一种是同步任务，另一种是异步任务。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。在所有同步任务执行完之前，任何的异步任务是不会执行的。

异步执行的运行机制如下：
1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复上面的第三步。
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会循环反复。

一般来说，有以下四种会放入异步任务队列：
setTimeout和setlnterval
DOM事件
ES6中的Promise
Ajax异步请求

回到开头的代码中：

for(var i=0;i<10;i++){
        setTimeout(function(){
         console.log(i);  
        },i*1000);
    }
答案：10、10、10、10、10、10、10、10、10、10

代码中的for循环是个同步任务，setTimeout是个异步任务，所以把for循环执行完毕后（i=10）才会执行setTimeout（）函数，所以导致输出了10个10的结果。

具体执行步骤如下：
1.for循环为同步任务，先执行产生了十个定时器。
（由于这里的for循环不是独立的代码块,声明的 i 为全局变量，遍历完成相当于全局环境i=10；）
2.同步任务for遍历完了再执行异步任务的定时器。
（此时定时器运行环境与for循环同级，即在全局环境i=10下运行，因此输出10个10）

那么怎么才能输出正确答案0、1、2、3、4、5、6、7、8、9而不是连续的10个10呢？
主流的方法是用Js的闭包来实现这个问题：因为闭包里setTimeout()并不是暴露在全局环境下，而是在闭包的独立作用域中。（这种方法当然是可行的，且兼容几乎所有浏览器，但是闭包写起来有点繁琐…有没有更简单的方法呢？答案是~有的！）

回到我们的问题结果出现本身：问题代码里for循环不是独立的代码块，导致了所声明的i为全局变量，进而导致了定时器执行时候的i为遍历后的i=10。

解决方法：将变量i改为let声明的变量而不是全局变量，此时的for循环就会变成是一个单独的作用域，作用与闭包形成的块级作用将相同，因此能够输出想要的结果。

for(let i=0;i<10;i++){
        setTimeout(function(){
         console.log(i);  
        },i*1000);
    }
答案：0、1、2、3、4、5、6、7、8、9

温馨提示：ES6中的属性方法let目前只支持现代浏览器，所以如果考虑浏览器兼容问题的小伙伴还是乖乖用闭包的方法吧。

那么又有小伙伴有疑问了，既然在for循环中运行setTimeout()涉及到了异步，那为什么第一段代码的结果不是连续的10个10呢？

这就涉及到了console.log 与console.log()的区别了。
先用eval()测试一下：console.log 与console.log()

此处顺便一提eval()函数的用法：eval(str)，此函数可以接受一个字符串str作为参数，并把此str当做一段javascript代码去执行，如果str执行结果是一个值则返回此值，否则返回undefined。

再来看一眼开头的两段代码:

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

答案：0、1、2、3、4、5、6、7、8、9

for(var i=0;i<10;i++){
        setTimeout(function(){
         console.log(i);  
        },i*1000);
    }
答案：10、10、10、10、10、10、10、10、10、10

参考的博客里对console.log 与console.log()的区别是这么写的：
console.log是一个function 函数名,而console.log()是立即执行的，也就是IIFE，所以console.log()是同步任务跟for循环是同步执行的，而setTimeout()是异步任务需要等到主线程的同步任务执行完毕后才能执行。（看完之后我还是不太理解，于是乎又针对这个问题再次搜索了一番）

海量查阅后自我总结如下：
针对上面两端代码，每段代码的每次for循环其实都会执行setTimeout(),setTimeout() 会判断第一个参数是否是[function]，如果是，则执行异步任务。如果不是，则会尝试将它当做字符串处理。所以第二段代码setTimeout里面的function被当成异步任务不会立刻执行，而是被放入任务队列。而第一段代码中console.log(i)被当作字符串处理（即setTimeout里没有回调函数），所以相当于是跟着for循环同步执行的而不需要等到for都遍历完成（i=10）再执行计数器。

再来对比第三段代码：

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

答案：10、10、10、10、10、10、10、10、10、10
 

与第一段代码比较下：

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

答案：0、1、2、3、4、5、6、7、8、9

发现什么没有？console.log(i)上加双引号，结果就变成10、10、10、10、10、10、10、10、10、10。

其实弄清楚了上文所说到的例子就很容易理解，加了双引号的console.log()相当于是又变成一个回调函数，而不会被当作字符串处理（当然也就不会立即执行函数），所以就被当成异步任务处理。

自此花了大半天才弄清楚的问题，分享出来也希望能帮到大家啦~如果有错欢迎评论区滴滴我！

此篇总结涉及的博客文章实在是多，如有侵权请与本人联系。
总结所参考的资料大部分来自此篇博客
https://blog.youkuaiyun.com/Febby_/article/details/94763441