JS循环变量超出作用范围

看下列代码

var li = document.querySelectorAll('li');
for(var i = 0; i<10; ++i){
li[i].oncilck=function(){
console.log(i);//无论点击哪个li都会输出10
}
}

为什么会这样？
这是因为，定时器和事件处理函数还有Ajax中回调函数，均属于异步任务
异步任务并不是在主线程中立即执行，而是放到任务队列中，所以如果将异步任务放到for循环中，且异步任务函数中使用了循环变量，当异步任务从任务队列中取出执行后，循环早已完成，循环变量也已经超出理想值，从而造成错误

这时有一个问题，为什么循环变量在循环外也能被访问？看这里.

解决方法

1.使用闭包

var li = document.querySelectorAll('li');
for(var i = 0; i<10; ++i){
	(function(i){
		li[i].oncilck=function(){
		console.log(i);
	})(i)

}
}

每次执行循环时，都会将当前的i当作实参传入立即执行函数，此时，最内层事件处理函数中的i并非为for循环中的循环变量i，而是立即执行函数中的参数i(内层函数访问for循环变量时，被立即执行函数的参数顶替，而事件处理函数未触发，则立即执行函数，无法执行完，局部变量就不会注销)

2.使用let声明循环变量

在另一篇中写的很详细.

使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

for(let i = 0; i<10; ++i){
}
console.log(i);//not defined

在循环中使用let关键字声明循环变量，可以防止在循坏结束后，依然可以访问