Mutable variable is accessible from closure

最新推荐文章于 2022-09-11 22:53:03 发布

签到赢福利

最新推荐文章于 2022-09-11 22:53:03 发布

阅读量1.5k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/hahalalalalalala/article/details/106864597

版权

原本的需求是想对下面这个轮播图的原点点击事件进行处理，想通过一个循环把三个原点点击事件一并处理
一开始的代码是这样写的

for (var i = 0;i < aLiDot.length;i++){

    aLiDot[i].onclick = function () {
            
        //先把所有轮播图设为none
        for (var j = 0;j < aLiLunBo.length;j++){
            aLiLunBo[j].style.display = 'none'
        }
            
        //再把原点样式取消
        for (var j = 0;j < aLiDot.length;j++){
            aLiDot[j].className = '';
        }
            
        //最后显示该原点对应的轮播图以及原点样式
        aLiLunBo[i].style.display = 'block';
        aLiDot[i].className = 'active';
    }
}

可是浏览器出现了这样的错误

Mutable variable is accessible from closure

看了网上一些讲解，找到问题的症结在于
循环内部是点击事件，只有在点击之后才会运行里面的代码，但是在加载到浏览器的过程中没有发生点击事件，当你在浏览器中点击时整个循环已经结束了，而每个onclick内部是拿不到对应的i值的
解决方法
使用闭包保存每次循环的i值
修改之后的代码

for (var i = 0;i < aLiDot.length;i++){
        
    (function (index) {
        aLiDot[index].onclick = function () { //这个函数只有在点击时才会执行，但在加载完页面之后循环已经结束了，此时下面的两个需要i的地方拿不到i
                
            //先把所有轮播图设为none
            for (var j = 0;j < aLiLunBo.length;j++){
                aLiLunBo[j].style.display = 'none'
            }
                
            //再把原点样式取消
            for (var j = 0;j < aLiDot.length;j++){
                aLiDot[j].className = '';
            }
                
            //再显示该原点对应的轮播图
            aLiLunBo[index].style.display = 'block';
            aLiDot[index].className = 'active';
        }
    })(i);//每次循环时匿名自执行函数是执行了的，只是里面的点击函数没有执行，但每次的i都是进去了的
}