For循环中的异步问题（JS）

for循环内外的变量值

先看一段代码

    for(var i=0;i<3;i++){
        console.log("内部："+i);
    }
        console.log("外部："+i);

结果：

不难理解，for循环执行了3次，在内部 i=0 到 1 到 2 ，当i加到3时，已经不再小于3。所以停止循环，i++不执行，在外部拿到的i=3；

通过循环给每个元素绑定事件

如图有三个圆，给每个元素绑定点击事件，并且点击变色。

HTML结构

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

JS

var oli = document.querySelectorAll("li");
for (var i=0;i<oli.length;i++) {
        oli[i].onclick = function () {
            this.style.backgroundColor = "red";
        }
}

步骤1：获取元素对象数组
步骤2：通过循环 给每个元素绑定点击事件
步骤3：元素点击时的元素变化

疑问？ 这里的问什么使用this ，为什么不能用 oli[i] 去改变样式。

解答之前先看一个东西

原来点击事件是li对象的一个属性啊。
按照对象的概念，值可以存储各种数据以及函数。
在对象中，函数被称为方法。
可以看出，我们把自己写的匿名函数赋给了li对象的onclick属性。

如果没有绑定方法呢？

var oul = document.querySelector("ul");

打印出了null，并没有报错not definded 。可以看出这个事件属性已经事先定义好了。

循环与函数的异步问题

继续解答
for循环给每个元素绑定事件方法，那么函数内部与外部的为什么i变量为什么就不一样？
1.函数申明创建完，必须调用才能执行，也就是点击才会调用。
2.for循环一瞬间执行完，当点击时for循环已经执行完。
3.作用域问题

当我们点击时，如文章开头所写的案例一样，变量是完成循环之后的值。
关于作用域，申明一个函数时，其内部就有了局部作用域。当函数内部没有这个变量时，就会去外部找，一直找到全局变量。
当我们点击时，函数内部并没有i这个变量，就会去外部寻找，此时for已经执行完，我们并不能拿到我们想要的变量值。

我们写的自定义函数其实就相当于一个回调函数，由系统事件来调用，相当于在代码最后 调用 oli[i].onclick();

使用this
这里的this是指向了当前的元素本身，即一个对象，而不是指向当前函数。