[JavaScript]js单线程，闭包，以及如何处理闭包带来的一些影响

r囧r小猫 2022-11-27 03:10 63阅读 0赞

![在这里插入图片描述][20200813104558956.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>时间</th> 
   <th>输出</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第0秒</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>第1秒</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>第2秒</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

原因：**js是单线程**（因为他是面向web的语言，比如防止用户同时触发删除和添加，如果是多线程会导致出现bug），setTimeout中的()=>\{\}会被加入任务队列，**js会先执行执行栈里的内容**（对于上面的函数来说就是三次循环完成setTimeout），**再执行任务队列**（setTimeout中的函数）。

**将var改为let，则输出结果为0 1 2秒分别输出0 1 2**

for(let i=0;i<3;i++){ 
        setTimeout(
            ()=>{ console.log(i);},1000*i
        )
    }

**应用场景**

目标：点击li输出对应的i

<body>
        <ul>
            <li>000</li>
            <li>111</li>
            <li>222</li>
        </ul>
    </body>
    <script>
        var lis = document.getElementsByTagName("li");
        for (var i = 0; i < 3; i++) { 
            lis[i].index = i;//将i赋值给lis[i].index保存到对象中
            lis[i].onclick = function () { 
                console.log(this.index);
            }
        }
        //或者将var i改为let i即可
        var lis = document.getElementsByTagName("li");
        for (let i = 0; i < 3; i++) { 
            lis[i].onclick = function () { 
                console.log(i);
            }
        }
    </script>

[20200813104558956.png_pic_center]: /images/20221124/199fc5e6e7b24ca9b9cbf1209169f686.png

发表评论取消回复

表情：

评论列表（有 0 条评论，63人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是闭包，以及闭包应用

变量的作用域复习变量根据作用域的不同分为两种：全局变量和局部变量。 1. 函数内部可以使用全局变量。 2. 函数外部不可以使用局部变量。 3. 当函数执行完毕，

布满荆棘的人生/ 2022年12月19日 06:22/ 0 赞/ 311 阅读

相关 [JavaScript]js单线程，闭包，以及如何处理闭包带来的一些影响

![在这里插入图片描述][20200813104558956.png_pic_center] <table> <thead> <tr> <th>时间</th

r囧r小猫/ 2022年11月27日 03:10/ 0 赞/ 64 阅读

相关什么是闭包？闭包的优缺点？

哇，这篇文章的闭包解释的超级棒，简单易懂阮一峰大佬的文章点击 → [原始链接][Link 1] ![watermark_type_ZmFuZ3poZW5naGV

野性酷女/ 2022年10月31日 01:39/ 0 赞/ 394 阅读

相关闭包

先来看一个题目例子，我将在下一环节出闭包讲解。。题目描述实现函数 makeClosures，调用之后满足如下条件： 1、返回一个函数数组 result，长度与

喜欢ヅ旅行/ 2022年06月04日 05:51/ 0 赞/ 343 阅读

相关什么是闭包？闭包的优缺点？

闭包（closure）是javascript的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。 1、变量作用域要理解闭包，首先要理解javascript的特殊的变

清疚/ 2022年05月20日 02:28/ 0 赞/ 333 阅读

相关什么是闭包？闭包的优缺点？

什么是闭包？闭包的优缺点？闭包（closure）是javascript的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。 1、变量作用域要理解闭包，首先要

小灰灰/ 2022年04月23日 12:34/ 0 赞/ 437 阅读

相关什么是闭包？闭包的优缺点？

什么是闭包？闭包的优缺点？闭包（closure）是javascript的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。 1、变量作用域要理解闭包，首先要

￡神魔★判官ぃ/ 2022年03月07日 07:56/ 0 赞/ 503 阅读

相关什么是闭包？闭包的优缺点？

什么是闭包？闭包的优缺点？闭包（closure）是javascript的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。 1、变量作用域要理解闭包，首先要

迷南。/ 2022年03月07日 07:56/ 0 赞/ 472 阅读

相关什么是闭包？闭包的优缺点？

闭包（closure）是javascript的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。 1、变量作用域要理解闭包，首先要理解javascrip

墨蓝/ 2021年09月20日 06:28/ 0 赞/ 567 阅读

相关闭包概念，闭包的场景？

闭包能够读取其他函数内部变量的函数例如在javascript中，只有函数内部的子函数才能读取[局部变量][Link 1]，所以闭包可以理解成“定义在一个[函数][Lin

野性酷女/ 2021年09月08日 07:16/ 0 赞/ 562 阅读