利用闭包解决for循环里onclick事件不能捕捉实时i值问题

问题描述

我们都知道，如果我们对于一组元素（相同的标签）同时进行onclick事件处理的时候（在需要获取到索引的时候），一般是写一个for循环，但是onclick是一个异步调用的，所以会带来一个问题，当我们触发这个事件的时候，我们能获取的i值是for完整执行完后i的值，而不能获取到代码顺序里i的值，看一个例子

window.onload = funtion(){
    var lis = document.getElementsByTagName('li');
    for( var i = 0; i < lis.length; i ++ ){
        lis[i].onclick = function(){
            console.log(i);//当我们点击面页里的li时候 i 总是等于lis.length
        };
    }
};

以前惯用的解决方式

window.onload = funtion(){
    var lis = document.getElementsByTagName('li');
    for( var i = 0; i < lis.length; i ++ ){
        lis.index = i;
        lis[i].onclick = function(){
            console.log( this.index );//每个li对应有着自己的索引值，也就可以判断出是什么时
        };
    }
};

利用闭包解决

window.onload = function(){
    var lis = document.getElementsByTagName('li');
    for( var i = 0; i < lis.length; i++ ){
        (function (n){
            lis[n].onclick = function(){
                console.log( i + '-' + n );//i总是等于10 而n则是安装顺序
            };
        }(i));
    }
};

原理：闭包的局部作用域。由于这个你们函数总是和代码执行顺序一样的，所以n可以实时记录i的值。由于for每执行一次，就执行一次匿名函数，每一次执行有自己的执行环境，有着自己的作用域链，所以用这函数里面一个变量来记录一下实时的i的值，这个n是不会随着i的改变而改变的