js运行机制分析

常考面试题有一题是这样的：

//要求修改为每秒打印数字。
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 是受到了setTimeout的异步机制的影响。所以先分析一下js机机制。

 js机制

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

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

解决方法
1.闭包

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

2.使用let声明变量

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

 使用setTimeout第三个参数解决

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

setTimeout() 会判断第一个参数是否是[function]，如果是，则执行异步任务。如果不是，则会尝试将它当做字符串处理。

这里setTimeout并没有执行异步，只是被当作一个字符串处理，所以是相当于跟着for循环实现同步任务并没有执行异步任务