setTimeout和for循环

最新推荐文章于 2023-03-05 21:33:51 发布

ゼロ-May

最新推荐文章于 2023-03-05 21:33:51 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_40892155/article/details/121126192

4 篇文章

订阅专栏

本文探讨了JavaScript中setTimeout定时器的执行机制及其与变量作用域的关系。通过两个示例对比了使用var与let声明变量的区别，解释了为何前者会输出5个5，而后者按顺序输出0至4。

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

for(var i=0;i<5;i++){
	setTimeout(function(){
    	console.log(i);
    },i*1000)
}
// 输出5次5，一秒一次

setTimeout是异步执行的，i*1000毫秒后向队列里添加一个任务，只有主线上的全部执行完才会执行任务队列里的任务，所以当主线for循环执行完之后i的值为5，这个时候再去任务队列中执行任务，i全部为5
每次for循环的时候setTimeout都会执行，但是里面的function则不会执行，被放入任务队列，因此放了5次，1秒执行一次
如果把var换成let，那么输出结果为0,1,2,3,4

   for(let i=0;i<5;i++){
      setTimeout(function(){
        console.log(i);
      },i*1000)
   }
   // 输出 0,1,2,3,4 一秒输出一个

因为let i 是的块级变量，每个i只能存活到大括号结束，并不会把后面的for循环的i赋值给前面的setTimeout中的i;而var i 则是局部变量，这个i的声明周期不受for循环大括号的限制