JavaScript中对列表内容提取并操作

Question

向下面这样提取列表中的内容并操作后只会得到list列表的最后一个元素，

var list = document.getElementById("container").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
    lis[i].onclick = function () {
            setImg(i);
            setLi(i);
    };
}

查询一些代码后看到类似操作是这样的：

for (var i = 0; i < lis.length; i++) {
    (function (x) {
        lis[x].onclick = function () {
            setImg(x);
            setLi(x);
        }
    })(i);
}

不大明白为什么这里要采用一个function(x)的形式，这里有什么要注意的么，求大神支招？

Answer 1

onclick回调真正执行是在你点击的时候才执行，这个时候i已经是最后一个值了，这就导致了你任何一个li点击，用到的i值都是同一个。

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

包起来这种立即执行，保证了，里面每个x都取到了各自的值，而不是同一个值

Answer 2

这是一个闭包, 把i的值保存下来。
可以搜索异步,闭包