小白成长之路_今天学到的(2018.4.16)

原创 2018年04月16日 11:45:40

刚刚困扰许久的问题

用for循环绑定事件执行时总是得到循环的最后一条参数,代码如下

var param = {
    "0":{
        "id":"swipe-top",
        "scope":"0",
        "type":"Swiper",
        "content":[]
    },
    "1":{
        "id":"act-body",
        "scope":"1",
        "type":"Normal",
        "content":[]
    },

}

for(var scope in param){

    $("#"+param[scope].id).click(funciton(){

        show(param[scope]);

    });

}

function show(parm){

    console.log(parm);

}

以上代码执行完绑定的点击事件,无论点击id="swipe-top"或是id="act-body"元素,执行的函数show中得到的参数parm都是最后一个scope为1的参数

想了很久,打了断点改了参数试了几遍,没想到问题所在,后来百度了一下,发现是JS闭包的原因

以前只是知道闭包这个词,总觉得是很重要的一个知识点,但是只是在书本上看到过,也并不清楚它的概念以及原理,工作中并未涉及到

如今遇到了,也算对闭包有了一点实质性的理解了

目前我了解到闭包的一点如以上代码中的for循环绑定事件

我的理解是(并不一定正确),点击事件click中的function函数在绑定时并不执行,而函数中的show函数此时并没有得到实际参数,所以当循环结束,点击事件触发时function执行,此时show函数得到的参数永远是for循环最后一次获取的值param[1]

针对以上问题最终的解决方法如下

for(var scope in param){

    $("#"+param[scope].id).click(

        (function(parm){

    return function(){
                show(parm);
    }

        })(param[scope])

    );

}

click绑定一个立即执行的函数,用当前循环的值param[scope]作为参数,该函数的内容为返回另一个函数,这个返回的函数为click点击事件的最终执行函数,此时show获取的参数parm即是当前循环的值param[i],通过这种方式包装起来的函数就是闭包,有不对的地方望大佬指出。

emmmmmm.....其实之前辛辛苦苦写了一大堆的,发布之后莫名其妙就没了,只留了一半的草稿,CSDN真坑!

小白的成长之路吧。。血泪史啊。

讲道理的话这是宝宝的第二份工作,毕业半年,第一个工作一个月半,第二份工作差不多。。七个月? 毕竟在学校期间只负责划水打酱油,每天就知道睡醒了打dota,在学校期间其实是没写过一行代码的。从我第一个工...
  • qq_20952591
  • qq_20952591
  • 2016-08-30 18:32:05
  • 716

小白成长之路_今天学到的(2016.7.27)

前台同步传多个参数到后台Cotroller就是多加几个/{xxx}/{xxx} 比如: $(function (){ $(".list-group-item").click(function(){ v...
  • findyou2016
  • findyou2016
  • 2016-07-27 19:12:00
  • 46

一个JAVA程序员成长之路分享

我搞JAVA也有些日子了, 因为我比较贪玩,上进心不那么强, 总是逼不得已为了高薪跳槽才去学习, 所以也没混成什么大牛, 但好在现在也已经成家立业, 小日子过的还算滋润, 起码顶得住一月近万元的吃喝拉...
  • u013659231
  • u013659231
  • 2017-05-26 16:18:38
  • 7397

JAVAEE 大牛成长之路

我也搞了几年JAVA了,由于一向懒惰,没有成为大牛,只是一普通程序猿,不爱玩社交网站,不爱玩微博,唯独喜欢百度贴吧,潜水很久了,手痒来给新人分享下从新手成长为老鸟的已见,也刷刷存在感,应该不比曝照差吧...
  • snioper007
  • snioper007
  • 2014-09-02 16:18:30
  • 1799

runoob菜鸟手册

  • 2018年01月12日 00:11
  • 52.98MB
  • 下载

数据分析师成长之路

  • 2015年04月23日 17:40
  • 3.27MB
  • 下载

Java程序员谈一谈-----java程序员成长之路

转载:http://www.banzg.com/archives/679.html?ref=myread 阿里面试回来,想和Java程序员谈一谈 引言 其实本来真的没打算写这...
  • wickedvalley
  • wickedvalley
  • 2017-02-10 22:07:46
  • 7313

第14期《成长之路》2017年9月刊

1. 虚拟机与VMware-刘兵
  • TGBBlog
  • TGBBlog
  • 2017-09-06 17:31:52
  • 967

《内外兼修:程序员的成长之路》

1.最近笔者读了这样一本书,总的来说还是比较有意思2.主要记得的内容有三个方面:首先是现在技术方向和计算机行业的就业方向;其次是利用开源程序框架加快开发和相关的工具;最后就是讲了工作中的团队精神,说明...
  • qq_25327609
  • qq_25327609
  • 2017-03-29 09:07:45
  • 4009

Android工程师成长之路

见习工程师 实习生(student engineer) 1、掌握基本的Android应用开发和调试技能,了解Android SDK,会用Eclipse开发工具; 2、掌握基础控件、UI布局,能够处...
  • hbdatouerzi
  • hbdatouerzi
  • 2016-08-15 23:05:14
  • 435
收藏助手
不良信息举报
您举报文章:小白成长之路_今天学到的(2018.4.16)
举报原因:
原因补充:

(最多只允许输入30个字)