for执行问题总结

2021-12-29 11:02:56 阅读：147 来源： 互联网

标签：总结 setTimeout 作用域 timer JS 问题 let var 执行

for循环相关

for(var i = 1; i <= 5; i ++){
      console.log(i)  // 1 2 3 4 5
}

观察以下代码:

for(var i = 1; i <= 5; i ++){
    setTimeout(function timer(){
        console.log(i)  //5个 6
    }, 0)
}

问题描述：

为什么会全部输出6？如何改进，让它输出1，2，3，4，5？

原因：

因为setTimeout为宏任务，由于JS中单线程eventLoop机制，在主线程同步任务执行完后才去执行宏任务，因此循环结束后setTimeout中的回调才依次执行，但输出
i 的时候当前作用域没有，往上一级再找，发现了 i ,此时循环已经结束，i 变成了6。因此会全部输出6。

解决方法：
1、利用IIFE(立即执行函数表达式)当每次for循环时，把此时的i变量传递到定时器中

for(var i = 1;i <= 5;i++){
    (function(j){
        setTimeout(function timer(){
        console.log(j)
        }, 0)
    })(i)
}

2、给定时器传入第三个参数, 作为timer函数的第一个函数参数

for(var i=1;i<=5;i++){
    setTimeout(function timer(j){
        console.log(j)
    }, 0, i)
}

3、使用ES6中的let

for(let i = 1; i <= 5; i++){
    setTimeout(function timer(){
        console.log(i)
    },0)
}

let使JS发生革命性的变化，让JS有函数作用域变为了块级作用域，用let后作用域链不复存在。代码的作用域以块级为单位，以上面代码为例:

// i = 1
{
    setTimeout(function timer(){
        console.log(1)
    },0)
}
// i = 2
{
    setTimeout(function timer(){
        console.log(2)
    },0)
}
// i = 3
...

因此能输出正确的结果1，2，3，4，5。

标签：总结,setTimeout,作用域,timer,JS,问题,let,var,执行
来源： https://blog.csdn.net/lqlq54321/article/details/122210851

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

for执行问题总结