闭包解决的问题

今天在做轮播图的时候,需要给轮播图下面的小点加上点击事件,点击的时候翻到对应的图,一个一个添加事件很麻烦,于是想到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)
                    }

                    //  此处就是大名鼎鼎的闭包

于是完美达到效果

posted @ 2017-06-24 15:24  Lu_Lu陌鹿  阅读(509)  评论(0编辑  收藏  举报