闭包解决的问题
今天在做轮播图的时候,需要给轮播图下面的小点加上点击事件,点击的时候翻到对应的图,一个一个添加事件很麻烦,于是想到for循环给每个小点添加
for (var i = 0; i < dots.length; i++) { // 这里使用的是立即执行函数, dots[i].onclick = function() { currentSlide(i); } }
当代码写好运行时,不出所料,点击第二个下点的时候,图片翻到了最后一张的图,这是因为for循环里面的变量并不是每个小点自有的,因为for循环没有块级作用域,i是全局变量,当你在点击按钮的时候实际上i已经循环完了,拿到的是最后的值
那么要达到效果就只有借助闭包,把i隐藏起来,让每个小点各有一个i
于是代码改为
for (var i = 0; i < dots.length; i++) { // 这里使用的是立即执行函数, (function(i) { dots[i].onclick = function() { currentSlide(i); } })(i) } // 此处就是大名鼎鼎的闭包
于是完美达到效果
真正的稳定,不是你在一家单位有饭吃,而是你足够牛逼,不论走到哪里都有饭吃