JavaScript闭包函数应用
作者:陆金龙
发表时间:2015-07-12 15:24
JavaScript函数闭包应用场景:
需求:在循环中绑定click事件,要求点击某个按钮时,弹出显示该按钮的索引。
普通绑定面临的问题:变量msg的值虽循环次数发生变化,要关联到按钮绑定的事件中,常规方式难以实现。 如点击"普通绑定"后,每个按钮点击时,弹出都是“第5个按钮”,显然不是我们预期的。
预期:通过闭包,将msg的值"固化"到闭包函数中,并将闭包函数绑定到按钮的点击事件上。
JavaScript代码清单:
function closurefunTest() { var btns = $("#divPanel input"); $(btns).unbind("click"); for (var i = 0; i < btns.length; i++) { var msg = "第" + i + "个Button"; var clickCall = getClickCall(msg); //$(btns[i]).click(function () { //clickCall(); //}); //以上为错误的用法,click执行时才使用到clickCall,此时clickCall又被修改了,只有最后一个i的值被使用到 $(btns[i]).click(clickCall); //正确用法:click绑定时即使用clickCall(不后续循环的影响),每个每次循环中i都被用到了。 } } function getClickCall(msg) { var localfun = function () { alert(msg); } return localfun; } function normalfunTest() { var btns = $("#divPanel input"); $(btns).unbind("click"); for (var i = 0; i < btns.length; i++) { var btn = btns[i]; $(btn).click(function () { alert("第" + i + "个Button"); }); } }
Html中body清单:
<p>
<input type="button" value="普通绑定" onclick="normalfunTest();" />
<input type="button" value="使用闭包" onclick="closurefunTest();" />
</p>
<div id="divPanel">
<input type="button" id="button1" value="button1" />
<input type="button" id="button2" value="button2" />
<input type="button" id="button3" value="button3" />
<input type="button" id="button4" value="button4" />
<input type="button" id="button5" value="button5" />
</div>
<span id="msg"></span>
JavaScript函数闭包演示