【javascript知识进阶】关于for循环中定义setTimeout

最新推荐文章于 2024-11-18 08:00:00 发布

ConardLi

最新推荐文章于 2024-11-18 08:00:00 发布

阅读量662

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 函数

本文链接：https://blog.youkuaiyun.com/qq_34149805/article/details/77455578

10 篇文章

订阅专栏

本文探讨了JavaScript中使用setTimeout结合闭包实现不同预期输出的方法。通过解析闭包和作用域链，解决了循环中setTimeout输出相同值的问题，并提供了两种实现方案。

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

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

上面的代码不会输出数字 0 到 9，而是会输出数字 10 十次，而且是同时输出。

可见，外部循环完毕后才对settimeout进行了定义，即i值变成10以后，所以实际上定义了十个i为10的timeout函数。

为什么呢？或许下面这个例子会让我们更直接的看到问题的答案：

var i = 10;

setTimeout(function () {
    console.log(i)
},0);

i = 100;

输出结果是100。

页面中所有由setTimeout定义的操作，都将放在同一个队列中依次执行。

而这个队列执行的时间，需要等待到函数调用栈清空之后才开始执行。即所有可执行代码执行完毕之后，才会开始执行由setTimeout定义的操作。而这些操作进入队列的顺序，则由设定的延迟时间来决定。

了解了这些，上面的代码为什么出现这样的结果就很明显了：setTimeout定义时，所有的外部代码都执行完毕了，也就是说，在setTimeout所在的作用域中，其他代码会影响到我们所设定的时间值。

所以解决这个问题，我们只需要限制它的作用域就可以了，让这段作用域中只执行定义setTimeout的代码。

我们和可以用一个自执行函数来限制它的作用域，看起来就像给settimeout函数外部又“包”了一个函数，实际上这就形成了一个闭包。

其实广泛上来讲闭包判定的准则：即执行时是否在内部定义的函数中访问了上层作用域的变量。

for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

这个自执行函数内部没有什么能改变变量i的代码了，所以进入该函数后settimeout就会马上被定义。外部的for循环无论怎么改变都不会影响传入该作用域的i值。

有另一个方法完成同样的工作，那就是从匿名包装器中返回一个函数。这和上面的代码效果一样。

for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}