×

用一个简单案例解释FOR循环使用的问题

作者:Terry2019.04.28来源:Web前端之家浏览:10165评论:0
关键词:js闭包循环

用一个简单案例解释FOR循环使用的问题,来看下代码:

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

这是一段很简单的代码,就是一个普通的定时器执行程序。

输出结果:立即输出一个6,然后每隔一秒输出一个6;

首先因为 setTimeout 是个异步函数,所以会先把循环全部执行完毕,这时候 i 就是 6 了,所以会输出一堆 6。

解决办法有3种。

第一种是利用闭包的方式:

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

在上述代码中,我们首先使用了立即执行函数将 i 传入函数内部,这个时候值就被固定在了参数 j上面不会改变,当下次执行 timer 这个闭包的时候,就可以使用外部函数的变量 j,从而达到目的。

第二种就是使用 setTimeout 的第三个参数

这个参数会被当成 timer 函数的参数传入。

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

第三种就是使用 let 定义 i 

这个也是最为推荐的方式

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jssdf120124912.html

网友评论文明上网理性发言 已有0人参与

发表评论: