资讯专栏INFORMATION COLUMN

js循环和闭包的小总结

BetaRabbit / 1660人阅读

摘要:循环和闭包循环是最常见说明闭包的例子了,我分享一下自己踩的坑。结果就出来了还有一种最简单有效的方法是循环中的变量用声明,会让每次迭代都会声明。

循环和闭包
for循环是最常见说明闭包的例子了,我分享一下自己踩的坑。

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

一开始我以为打印的结果是每秒打印出来1 2 3 4 5,没想到的是我错了
结果竟然是五个6.我去,什么鬼??
后来仔细想想延迟函数的回调会在循环结束时才执行,因此会输出五个6。那么问题来了,代码出了什么问题呢?原来是循环中每个迭代在运行时都会给自己捕获一个i,然后我该怎么做才能让它打印出我想要的结果呢?

我们需要更多的闭包作用域,特别是每个迭代都需要一个闭包作用域。
我是通过申声明并立即执行函数来创建一个函数来创建作用域。

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

结果就出来了

还有一种最简单有效的方法是for循环中的变量用let声明,let会让每次迭代都会声明。

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

结果也能出来。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95413.html

相关文章

  • 深入理解JavaScript(二):由一道题来思考闭包

    摘要:中所有的事件绑定都是异步编程当前这件事件没有彻底完成,不再等待,继续执行下面的任务当绑定事件后,不需要等待执行,继续执行下一个循环任务,所以当我们点击执行方法的时候,循环早已结束即是最后。 概念 闭包就是指有权访问另一个函数作用域中的变量的函数 点击li标签弹出对应数字 0 1...

    曹金海 评论0 收藏0
  • 原生js练习题-第一课

    摘要:于是找来了前辈们留下的经典原生练习题,以期把看过的内容用起来,加深自己对原生的掌握。鼠标移入移出改变样式实现效果继续样式转换,虽然用的伪类便能实现,但既然是的练习题就得用用鼠标事件了。 0x0关于这个系列 差不多把《js高级程序设计》刷完了,所谓实践出真知,尤其编程这种实践和经验相当重要的事情,不能光说不做。但以我现在的水平,直接上手那些大项目是还是不够格的,还是得一步步扎实好基础再有...

    mdluo 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    dailybird 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    hellowoody 评论0 收藏0
  • 2017文章总结

    摘要:欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...

    wwolf 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<