一、写在前面
我们如果想要实现一个功能,每隔一秒打印1,2,3,4。此时我们想到的最简单的方法就是使用for循环加上定时器。
但是我们如果使用如下方式进行书写。
for(var i = 1; i < 5; i++){
setTimeout(() => {
console.log(i)
}, i * 1000)
}
// 5 5 5 5
如上述代码所示,此时打印出4个5,这明显不是我们想要的结果。
二、使用闭包进行解决
上面结果出现的原因是,var
不存在块级作用域,当进行for循环时,将i传递给setTimeout
,但是又因为setTimeout
中的回调函数是宏任务,会放到任务队列中,等待主线程的任务都完成,才开始执行。当主线程的都执行完毕后,此时打印出i就为5。此时我们可以使用闭包,保存每一次循环的i。
for(var i = 1; i < 5; i++) {
(function(x) {
setTimeout(() => {
console.log(x)
}, x * 1000)
})(i)
}
因为函数存在作用域,所以我们可以将通过函数调用将参数传递进去。
三、使用let
我们除了使用上述的方法进行解决外,此时我们也可以使用ES6
新增的定义变量的,let
来帮助我们解决。
for(let i = 1; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, i * 1000)
}
因为let存在块级作用域。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/123635280
内容来源于网络,如有侵权,请联系作者删除!