继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

For循环中的异步问题(JS)

DIEA
关注TA
已关注
手记 279
粉丝 63
获赞 387

for循环内外的变量值

先看一段代码

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



结果:

webp

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

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

webp


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

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]. = function () {            this.style.backgroundColor = "red";
        }
}

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

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

解答之前先看一个东西


webp


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

如果没有绑定方法呢?

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

webp


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

循环与函数的异步问题

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

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

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

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



作者:默非静语
链接:https://www.jianshu.com/p/883b05e0574d


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP