zoukankan      html  css  js  c++  java
  • 经典闭包问题

    你好!在学习js时 常遇到闭包的问题比较棘手 难以理解,接下来我将用一个小案例配合图形 来为大家解释一下原理,希望能对大家的学习有所帮助
    (如有不妥之处请指教)

    代码如下
    for(var i=0;i<5; i++){
    setTimeout(function(){
    console.log(i,(new Date).toLocaleString())
    },1000*i);
    }

    1
    2
    3
    4
    5
    6
    注释:// i的执行结果为 5 5 5 5 5 (for先执行完了 i为5)
    // 解释如下: 因为 for循环部分和 setTimeout console.log为同步事件 , funcition(){},1000*i为 异步操作 所以先将异步操作的部分存放到 任务队列中去(task list) 然后 先执行同步操作的部分 再通过 事件轮询(event loop 监听器)读取它的时间 当1000毫秒结束以后,通知主线程将它的异步操作部分拉回去(在主线程的末尾,同步操作完了,再执行它)
    // 注: 协程里边是 先进先出 所以i是按顺序执行的

    此时要输出 0 1 2 3 4 我们该如何解决呢?
    方案如下:


    //第一种解决方法
    for(i=0;i<5;i++)
    {
    (function(i){
    setTimeout(function(){
    console.log(i);
    },1000);
    })(i);
    } //输出 0 1 2 3 4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    // 第二种解决方法
    for(i=0;i<5;i++)
    {
    setTimeout(function(i){
    console.log(i);
    },1000,i)
    } //输出 0 1 2 3 4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    解释如下:
    setTimeout有两个参数,第一个参数是回调函数,第二个参数是毫秒数,表示要执行回调函数所要延迟的时间。但我们还需要知道的是,setTimeout会返回一个Id,即这个定时器的Id,在上面的代码中其实已经创建了5个定时器,但是默认只返回了最后的一个Id,所以会先输出一个5。
    因为5个定时器所打印出来的是同一个i变量,所以想要实现输出不同的数字,就需要把每个定时器所访问的变量独立起来,这就用到了JavaScript的闭包。闭包用途很多,可以很好地区分开各个作用域,避免变量的混淆,但是滥用闭包也会导致性能问题。那么通过下面的修改就可以了;

    图片解析:

    ————————————————
    版权声明:本文为CSDN博主「Kevin Yee」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_42144338/article/details/84789520

  • 相关阅读:
    平面点集最佳平面
    快速变幻AABB的顶点
    惯性坐标系
    Grapher
    Grapher
    射线到直线方程的转换
    两个运动球的相交性测试
    射线和球的相交性
    Glow Shader
    Shder中实现TintColor
  • 原文地址:https://www.cnblogs.com/gongxianjin/p/15747536.html
Copyright © 2011-2022 走看看