for(var i = 0;i<btnArr.length;i++){ btnArr[i].addEventListener('click',function(){ tabCardShow(i); }); }
普通的for循环,触发事件时传入的 i 的值一定是等于 btnArr.length ,i 的值停留在了循环执行完毕之后,并不符合初衷。
原因:i只作用于 for循环的作用域,所有 元素绑定时传入的都是该作用域的同一个 i 值,而 i 值停留在了循环最后一次的值上。
for(var i = 0;i<btnArr.length;i++){ (function(i){ btnArr[i].addEventListener('click',function(){ tabCardShow(i); }) })(i); }
原因:闭包传入i值,相当于每次循环都创造了一个作用域,向传入了 i 值,避免了污染,循环了多少次 ,就有多少个作用域,就有多少个 i 值。