setTimeout 与闭包。。。

最新推荐文章于 2024-04-20 03:55:43 发布

转载最新推荐文章于 2024-04-20 03:55:43 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dhsz/p/8444046.html

本文探讨了JavaScript中闭包和setTimeout的使用技巧。通过对比分析两种不同代码片段的行为，揭示了闭包如何帮助解决定时器中的变量作用域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下面一个比较坑的代码

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

首先一个for循环，会执行五次， setTimeout被执行了五次

但里面的timer这时候并没有执行，而是依次在1 2 3 4 5秒后执行

此时只建立了全局上下文；

timer放在了事件队列里面执行； timer执行时， for循环已经完成

全局作用域中的i变量值变成了6，此时创建timer的作用域和作用域链

因为timer里面并没有定义i, 也没有给i赋值，所以timer 在自己的作用域是找不到i的，

只能沿着作用域往上找，找到全局作用域的i，

timeri 获取全局作用域i，也就是6，所以5次timer都是输出6

当加入闭包的时候，情况就不一样了。

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

在 第一次 for循环的时候，同时又有自执行函数

也就是在for执行的同时，执行了匿名函数，创建了匿名函数的作用域，此时建立了匿名函数的上下文环境；

进入匿名函数的作用域的时候，包含了一个内部函数 function(){console.log(j)}

同时这个函数被全局变量 window.setTimeout引用，这就形成了闭包！

在匿名函数执行完后，匿名函数的执行上下文出栈

也就是在for循环第一次执行完后，

匿名函数的的活动变量 j ，由于闭包的关系，并没有被销毁，

而是保存在第一个window.setTimeout定时器中，此时i 是1； j也是1；这个值会一直保存在第一个定时器属性中；

直到第一个定时器被销毁；

然后进入第二次循环，同理又进入匿名函数，创建了第二个闭包，闭包的活动变量j 被第二个定时器引用；

也会保存在在第二个定时器中，此时 i,j都是2；

依次类推， 3 4 5; 完成需求！

转载于:https://www.cnblogs.com/dhsz/p/8444046.html

setTimeout 与 闭包。。。

setTimeout 与闭包。。。