面试题for循环与setTimeout的使用问题

之前在面试前端时遇到一道for循环与setTimeout的案例题

for(var i=0; i<10; i++){
    setTimeout(function(){
        console.log(i);
    }, 0)
}
//输出的是什么?为什么是这样的?如何解决?

结果:输出了 10个10.

由于才疏学浅当时就蒙圈了,后来回来查阅了一下大佬们的解释,还是弄清了点原因道理的.
问题出现在作用域上,用为console.log(i);中的i是var 定义的,所以是函数级的作用域.不属于for循环体,for 循环完时候正在执行setTimeout的10个回调函数.
事件机制:
js是单线程的,它有一个队列的运行机制,setTimeout会把回调的函数放入事件队列当中排队执行.
setTimeout会在延时设定的毫秒之后,啥也不管直接将回调函数放入队列当中

因为这时的for循环完之后此时i的值已为10.在js里,同步优先于异步优先于回调,这时10个setTimeout的回调函数全部塞入到事件队列中等待执行,for循环完成之后被遗弃执行了.

解决方法: 给console.log(i)创造作用域,保存i的值

for(var i=0; i<10; i++){
        (function(i){
            setTimeout(function(){
                  console.log(i);
                 }, 0)
          })(i)
        } //  输出0123456789

这里用到了立即执行函数,这样 console.log(i);中的i就保存在每一次循环生成的立即执行函数当中了.