刚刚困扰许久的问题
用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真坑!