循环中的异步&&循环中的闭包

Near_Li 发布于2019-08-23 15:37 / 818人阅读

摘要：原文链接在这之前先要了解一下循环中和的区别是函数级作用域或者全局作用域，是块级作用域看一个例子循环中的逻辑代码函数下的输出，全局下的不存在现在我们把换为循环中的逻辑代码报错了，不在函数作用域下，当然肯定也不会再全局下因为和的这个区别当然和的

原文链接
在这之前先要了解一下

for循环中let 和var的区别

var 是函数级作用域或者全局作用域，let是块级作用域
看一个例子

    function foo() {
      for (var index = 0; index < array.length; index++) {
        //..循环中的逻辑代码
      }
      console.log(index);//=>5
    }
    foo()
   console.log(index)//Uncaught ReferenceError: index is not defined

foo函数下的index输出5，全局下的index不存在
现在我们把var 换为let

    function foo() {
      for (let index = 0; index < array.length; index++) {
        //..循环中的逻辑代码
      }
      console.log(index)//Uncaught ReferenceError: index is not defined
    }
    foo()

报错了，index不在foo函数作用域下，当然肯定也不会再全局下
因为var和let的这个区别（当然var和let的区别不止于此）所以导致了下面的这个问题
关于var的

    const array = [1, 2, 3, 4, 5]
    function foo() {
      for (var index = 0; index < array.length; index++) {
        setTimeout(() => {
          console.log(index);
        }, 1000);
      }
    }
    foo()

看下输出

关于let的

    const array = [1, 2, 3, 4, 5]
    function foo() {
      for (let index = 0; index < array.length; index++) {
        setTimeout(() => {
          console.log(index);
        }, 1000);
      }
    }
    foo()

看下输出

因为var和let 在作用域上的差别，所以到这了上面的问题
使用var 定义变量的时候，作用域是在foo函数下，在for循环外部，在整个循环中是全局的，每一次的循环实际上是为index赋值，循环一次赋值一次，5次循环完成，index最后的结果赋值就为5；就是被最终赋值的index，就是5；
let的作用局的块级作用局，index的作用域在for循环内部，即每次循环的index的作用域就是本次循环，下一次循环重新定义变量index；所以index每次循环的输出都不同
这里还有另外一个问题，setTimeout，这是一个异步，这就是我们今天要讨论的

循环中的异步 setTimeout(func,time)函数运行机制

setTimeout(func,time)是在time（毫秒单位）时间后执行func函数。浏览器引擎按顺序执行程序，遇到setTimeout会将func函数放到执行队列中，等到主程序执行完毕之后，才开始从执行队列（队列中可能有多个待执行的func函数）中按照time延时时间的先后顺序取出来func并执行。即使time=0,也会等主程序运行完之后，才会执行。

一个需求，一个数组array[1,2,3,4,5],循环打印，间隔1秒

上面的let是循环打印了12345，但是不是间隔1s打印的，是在foo函数执行1s后，同时打印的

方式一放弃for循环，使用setInterval

    function foo(){
      let index = 0;
      const array = [1, 2, 3, 4, 5]

      const t = setInterval(()=>{
        if (index < array.length) {
          console.log(array[index]);
        }
        index++;
      }, 1000);

      if (index >= array.length) {
        clearInterval(t);
      }
    }
    foo()

我们上面说到，当for循环遇到了var，变量index的作用域在foo函数下，循环一次赋值一次，5次循环完成，index最后的结果赋值就为5；就是被最终赋值的index，就是5；

方式二，引入全局变量

代码执行顺序是，先同步执行for循环，再执行异步队列，在for循环执行完毕后，异步队列开始执行之前，index经过for循环的处理，变成了5。
所以我们引入一个全局变量j，使j在for循环执行完毕后，异步队列开始执行之前，依然是0，在异步执行时进行累加

    var j = 0;
    for (var index = 0; index < array.length; index++) {
      setTimeout(() => {
        console.log(j);
        j++;
      }, 1000 * index)
    }

方式三 for循环配合setTimeout（常规思路，不赘述，面试必备技能）

    const array = [1, 2, 3, 4, 5]
    function foo() {
      for (let index = 0; index < array.length; index++) {
        setTimeout(() => {
          console.log(index);
        }, 1000*index);
      }
    }
    foo()

方式四，通过闭包实现

开始讨论方式四之前我推荐先阅读一遍我之前写过一篇文章
谈一谈javascript作用域
我们对上面的问题再次分析，for循环同步执行，在for循环内部遇到了setTimeout，setTimeout是异步执行的，所以加入了异步队列，当同步的for循环执行完毕后，再去执行异步队列，setTimeout中有唯一的一个参数数index
方式三可行，是因为let是块级作用域，每次for执行都会创建新的变量index，for循环执行完毕后，异步执行之前，创建了5个独立的作用域，5个index变量，分别是0，1，2，3，4，相互独立，互不影响，输出了预期的结果
如果说每次循环都会生成一个独立的作用域用来保存index，问题就会得到解决，所以，我们通过闭包来实现

    const array = [1, 2, 3, 4, 5]

    function foo() {
      for (var index = 0; index < array.length; index++) {
        function fun(j) {
          setTimeout(function () {
            console.log(j);
          }, 1000 * j);
        }
        fun(index)
      }
    }
    foo()

setTimeout中的匿名回调函数中引用了函数fun中的局部变量j，所以当fun执行完毕后，变量j不会被释放，这就形成了闭包
当然我们可以对此进行一下优化

    const array = [1, 2, 3, 4, 5]

    function foo() {
      for (var index = 0; index < array.length; index++) {
        (function(j) {
          setTimeout(function () {
            console.log(j);
          }, 1000 * j);
        })(index)
      }
    }
    foo()

将foo函数改为匿名的立即执行函数，结果是相同的

总结

for循环本身是同步执行的，当在for循环中遇到了异步逻辑，异步就会进入异步队列，当for循环执行结束后，才会执行异步队列
当异步函数依赖于for循环中的索引时（一定是存在依赖关系的，不然不会再循环中调动异步函数）要考虑作用域的问题，
在ES6中使用let是最佳的选择，
当使用var时，可以考虑再引入一个索引来替代for循环中的索引，新的索引逻辑要在异步中处理
也可以使用闭包，模拟实现let
在实际开发过程中，循环调用异步函数，比demo要复杂，可能还会出现if和else判断等逻辑，具体的我们下次再续

参考
通过for循环每隔两秒按顺序打印出arr中的数字
setTimeOut和闭包
《你不知道的JavaScript》上卷

GPU云服务器云服务器 python中的&amp java中的&amplt java中的占位符&039 js获取循环中的某一条数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102334.html

详解Javascript的作用域、作用域链以及闭包

　　一、我们先说说javascript的作用域　　①全局变量-函数体外部进行声明　　②局部变量-函数体内部进行声明　　1)函数级作用域　　javascript语言中局部变量不同于C#、Java等高级语言，在这些高级语言内部，采用的块级作用域中会声明新的变量，这些变量不会影响到外部作用域。　　而javascript则采用的是函数级作用域，也就是说js创建作用域的单位是函数。　　例如：　　在C#当中我...

3403771864 2022-10-26 22:33 评论0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同学去面试，做了两道面试题全部做错了，发过来给道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。排序算法 -- JavaScript 标准参考教程（alpha） - 前端 - 掘金来自《JavaScript 标准参考教程（alpha）》，by 阮一峰目录冒泡排序简介算法实现选择排序简介算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...

enali 2019-08-20 16:36 评论0 收藏0
温故js系列（14）-闭包&amp;垃圾回收&amp;内存泄露&amp;闭包应用&amp;作用域链&

摘要：该对象包含了函数的所有局部变量命名参数参数集合以及，然后此对象会被推入作用域链的前端。如果整个作用域链上都无法找到，则返回。此时的作用域链包含了两个对象的活动对象和对象。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：闭包 JavaScript-闭包闭包(closure)是一个让人又爱又恨的somet...

Amio 2019-08-22 10:36 评论0 收藏0
JavaScript之内存回收&amp;&amp;内存泄漏

摘要：内存回收内存泄漏前言最近在细读高级程序设计，对于我而言，中文版，书中很多地方一笔带过，所以用自己所理解的，尝试细致解读下。内存回收在谈内存泄漏之前，首先，先了解下的内存回收机制。内存回收 && 内存泄漏前言：最近在细读Javascript高级程序设计，对于我而言，中文版，书中很多地方一笔带过，所以用自己所理解的，尝试细致解读下。如有纰漏或错误，会非常感谢您的指出。文中绝大部分内容...

dayday_up 2019-08-23 12:36 评论0 收藏0
解析关于JavaScript事件循环同步任务与异步任务

　　学习一门知识，有些内容必须要提前明白，比如在学习js中同步异步的问题前，需要明白，js是单线程的，为什么它得是单线程的呢？现在先从它应用的场景来说，就是用来让用户与页面进行交互的吧。假如有js是多线程的，那在这个线程里面，用户点击某个按钮会增加一个DOM节点，在另一个线程里面，用户点击这个按钮又会删除一个DOM节点，那么此时js就不知道该听谁的了。这就是为什么会出现同步异步。假设没有异步，那么...

3403771864 2022-10-19 22:10 评论0 收藏0