for循环setTimeout闭包

最新推荐文章于 2024-04-04 12:28:32 发布

原创最新推荐文章于 2024-04-04 12:28:32 发布 · 408 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript

闭包专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨JavaScript中for循环、setTimeout与闭包的概念，通过具体代码示例解析变量作用域的区别，尤其是在使用var与let声明变量时的不同表现。阐述了在不同作用域下变量的生命周期与内存管理，帮助读者理解JavaScript的异步执行机制。

for循环setTimeout闭包

- for循环setTimeout闭包

for循环setTimeout闭包

for (var i = 0; i < 2; i++) { //个人理解：settimeout（stout）需要前面执行完才执行
            setTimeout(() => {    //第一轮 i=0 进入stout，但不执行stout，到for里面i++，这里i属于全局了全局的i此时等于1
                console.log(i); //第二轮 i=1 进入stout，但不执行stout，到for里面i++，这里i属于全局了全局的i此时等于2
            }, 1000);            //第三轮 i=2 在for里面判断退出for循环 此时全局i=2，这时候开始执行2个settimeout console出来的是全局i，统一是三
        }
        //输出： 2 2

for (let i = 0; i < 2; i++) { //个人理解：settimeout（stout）需要前面执行完才执行
            setTimeout(() => {    //第一轮 i=0 进入stout，但不执行stout，stout里的i等于0，let块作用域的原因不穿回for里面，i++使用for里面的i 这时for里面的i=1
                console.log(i); //第二轮 i=1 进入stout，但不执行stout，stout里的i等于1，let块作用域的原因不穿回for里面，i++使用for里面的i 这时for里面的i=2
            }, 1000);            //第三轮 i=2 退出循环 此时第一个stout的i=0，第二个stout的i=1，for循环已经退出，开始执行settimeout 输出0 1
        }
//输出结果： 0 1

{
            let a = 2;            //个人理解：settimeout（stout）需要前面执行完才执行
            {                       //第一轮 m=0 进入stout，但不执行stout，stout里的m等于m=0+100，此时m=100，let块作用域的原因不穿回for里面，m++使用for里面的m（0++） 这时for里面的m=1
                                    //第一轮 m=0 进入stout，但不执行stout，stout里的m等于m=1+100，此时m=101，let块作用域的原因不穿回for里面，m++使用for里面的m（1++） 这时for里面的m=2
                for (let m = 0; m < 2; m++)//第三轮 m=2 退出循环 此时第一个stout的m=100，第二个stout的m=101，for循环已经退出，开始执行settimeout 输出100 101
                {
                    setTimeout(() => {
                        m += 100;
                        console.log(m);
                    }, 500)
                }
            }
            a++;
            console.log(a);
            a++;
            console.log(a);
            a++;
            console.log(a);
        }
        //输出结果：3 4 5 100 101

前面懂了，这里也是一样的

 {
            var a = 2;
            {
                for (var m = 0; m < 2; m++) {
                    setTimeout(() => {
                        m += 100;
                        console.log(m);
                    }, 500)
                }
            }
            a++;
            console.log(a);
            a++;
            console.log(a);
            a++;
            console.log(a);
        }
        //输出结果：3 4 5 102 202