理解for循环的执行顺序

例如

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

我们预期打印出来的分别输出数字 1~5， 每秒一次， 每次一个。

但实际上， 这段代码在运行时会以每秒一次的频率输出五次 6。

首先我们来理解一下setTimeout这个方法：

setTimeout是异步执行，每i秒后就往任务队列里边添加一个任务，只有主线程的任务全部执行完了才会执行任务队列的任务，当主线程的任务执行完时，再去执行队列里的任务，此时i已为6，所以每次输出都是6；其实可以这样理解，for每执行一次，都是直接进主线程去先执行的，此时setTimeout也会执行，但它里边的timer()这个时候却是进到Event Table并注册函数，for循环执行完一次，timer()会移至Event Queue去排队等执行，for循环执行了6次，任务队列里会有5个timer()排队等着去执行，等for循环完全执行完了，就回去任务队列里一个个的执行timer()

假如把var i换成let i，结果输出为1,2,3,4,5。这是因为let 声明， 可以用来劫持块作用域， 并且在这个块作用域中声明一个变量。指出变量在循环过程中不止被声明一次， 每次迭代都会声明。 随
后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

还可以改成IIFE函数来执行，输出的结果也是1,2,3,4,5.因为在迭代内使用IIFE会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问

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

　　

转载于:https://www.cnblogs.com/tangyuanxiaoniu/p/9811162.html