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

最新推荐文章于 2024-07-05 17:32:03 发布

原创最新推荐文章于 2024-07-05 17:32:03 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

112 篇文章

订阅专栏

前端面试题

67 篇文章

订阅专栏

本文探讨了JavaScript的单线程特性，解释了setTimeout的工作原理，并通过示例说明了如何处理由闭包引起的副作用。在改用let关键字后，解决了变量作用域问题，实现了预期的输出效果。

在这里插入图片描述

时间	输出
第0秒	3
第1秒	3
第2秒	3

原因：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>