javascript - 前端小问题——js操作多个li获取当前li并操作

Question

我的代码大致是这样的：

var lis = document.getElementById("rotatePoint").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
    //还没搞懂这个为什么会实现这个效果
    (function (x) {
        lis[x].onclick = function () {
            setImg(x);
            setLi(x);
        }
    })(i);
}

主要是这里不懂：

(function (x) {
lis[x].onclick = function () {
setImg(x);
setLi(x);
}
})(i);

小弟这里想请教各位大神给帮忙解释一下，谢谢
或者有新的方法也行。

Answer 1

实现上面功能的错误写法如下：

var lis = document.getElementById("rotatePoint").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
    //还没搞懂这个为什么会实现这个效果
    lis[i].onclick = function () {
            setImg(i);
            setLi(i);
    };
}

这样写会导致click回调函数执行时setImg/setLi接收到的参数都是lis的最后一个元素~~~
这个问题是由于函数的词法作用域造成的-JS中只有函数有变量作用域，没有块作用域，变量作用域在声明的时候被确定。
上面代码中的click函数会使用到变量i，而这个变量定义在外层函数中，当回调函数执行时大家看到的变量就是外层函数中的同一个变量i，之所以能访问到i涉及到函数闭包的问题

所以为了避免这个问题，保证每一个回调函数调用到自己对应的i，需要将i封在一个函数作用域下，就定义一个函数，并且这个函数接收一个参数，作为回调函数将要使用到的值；这个函数需要在定义的时候就要被执行掉，否则又会回到原来存在问题~~~

(function (x) {
        lis[x].onclick = function () {
            setImg(x);
            setLi(x);
        }
})(i);

这个写法涉及到的知识点：
JS词法作用域
函数闭包

讲的有点绕，请搜索一下~~~

Answer 2

那里是一个闭包，用过创建一个匿名函数作用域保存i的值
因为onclick是异步操作，所以i本身会变量提升。

楼主对比一下不使用匿名函数的情况就可以明白