闭包的经典题目

晓晓2022

于 2022-05-22 10:29:56 发布

阅读量321

点赞数

分类专栏：前端基础文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45911604/article/details/124907249

版权

22 篇文章 1 订阅

订阅专栏

这篇博客探讨了JavaScript中的闭包现象，通过一个经典的for循环与setTimeout结合的例子，解释了为何会出现输出多个6而非预期的1到5。解决方案包括使用立即执行函数和ES6的let关键字，确保每个定时器回调函数拥有自己的作用域，从而正确打印序列号。

摘要由CSDN通过智能技术生成

目的：我们想要这段代码分别输出数字1-5，每秒一次，每次一个。

你以为写法：

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

结果：

输出：6，6，6，6，6

啊，啊，啊，为什么会输出5个6，而不是1，2，3，4，5

问题理解解答：
这里就涉及闭包的理解：

注意：延迟函数会在循环执行结束后执行。
也就是说：
仔细想一想，延迟函数的回调会在循环结束的时候才执行，。事实上，当定时器运行时即使每个迭代中执行的是setTimeout(…,0)，所有的回调函数仍然是在循环结束之后才会被执行，因此每次都输出6

解答：

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

输出：1，2，3，4，5

Es6之后可以下面这样写（const和let使用）：

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

小编O_O

关注

专栏目录