for 循环中使用 setTimeout 的问题

问题引入
下面代码的输出结果不是间隔3秒依次输出 1, 2, 3, 4, 5。而是隔了3秒连续输出6。这是为什么呢?

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

先说JS的执行机制和作用域
首先,JavaScript是单线程环境,代码从上到下依次执行。这种执行方式被称作为是“同步执行”。

但是,JavaScript引进了异步执行机制。所以,任务可以分为两种:一种是同步任务;另一种是异步任务。同步任务是指:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。异步任务是指:不进入主线程,而进入任务队列的任务,只有当主线程上的任务执行完毕后,才通知任务队列,任务队列中的任务才会进入主线程执行。

问题中的代码:for循环是同步代码,setTimeout是异步代码。在这种情况下,JavaScript依然按照从上到下执行先执行同步的代码,并将异步的代码放入到任务队列中。setTimeout的第二个参数是把执行代码console.log(i)添加到任务队列所需要的毫秒数,等待的时间是相对主程序执行完毕的时间计算的。也就是说,在主程序执行完后,会等待一会时间,再将setTimeout任务插入到任务队列中。

这样,在执行完同步的代码后,再去执行任务队列中的异步代码。这个时候,任务队列中会有5个console.log(i)等待执行。起初,以为每次循环,setTimeout放入到console.log(i)中的i的值是不一样的,但是,JavaScript引擎在开始执行任务队列中代码时,会在当前作用域中寻找变量i,但是当前作用域(也就是setTimeout中)并没有对 i 的定义。这个时候就会从创建该函数的作用域中寻找变量 i,创建该函数的作用域是全局作用域,所以就找到了for循环中的变量 i ,而这时的全局变量 i 的值已经确定为:6.所以最后打印出来的是5个6…

解决方案一:闭包
  for (var i = 1; i <= 5; i++){
    setTimeout(function timer(i) {
      console.log(i)
    }(i), 3000);
  }

这样会发现打印出来的值是1, 2, 3, 4, 5;但是没有时间间隔就输出。这时因为在function timer()后面添加()表示的是立即执行函数,只要setTimeout调用就执行了,而不是等到定时器到后才执行

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

这样会发现打印出来的值是1, 2, 3, 4, 5;会等待3秒再同时输出;与上面不同,这次的setTimeout要等到定时器到后才能执行。

如果想要每次输出后间隔一秒,只需要将传入的 i 和 time 相乘即可:

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

至于为什么是每隔一秒?因为按照上面写法,每隔setTimeout的定时器依次是 1s,2s,3s,4s,5s。之前说过,定时器计时是相对于主线程运行完毕后开始的,所以相邻输出间隔1s.

为什么闭包可以解决该问题?因为函数是有作用域的。这也是解决方案二可以实现的原因。

解决方案二:拆分结构
  function timer(i) {
    setTimeout(() => {
      console.log(i)
    }, i *1000);
  }

  for (var i = 1; i <= 5; i++){
    timer(i)
  }

也是解决了 i 的作用域问题。输出也是每隔一秒输出。

解决方案三:let
let声明的变量只在其声明的块或子块中可用,这一点,与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

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

这样打印的效果也是每隔一秒打印一个数值:1, 2, 3, 4, 5.
————————————————
版权声明:本文为CSDN博主「学而不思则忘」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43207025/article/details/108272874

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值