setTimeout与循环闭包

本文深入探讨了JavaScript中setTimeout的使用,解释了为何在for循环中使用setTimeout会导致数字7的打印。通过分析setTimeout的工作原理,解释了闭包在解决异步执行顺序问题中的关键作用。同时,提供了多种改造代码的方法,确保数字能按预期顺序0-5依次输出。这些方法包括立即执行函数表达式和利用闭包保存变量,以及使用setTimeout的第三个参数。通过这些示例,读者可以更好地理解和掌握JavaScript的异步编程与闭包概念。

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

setTimeout console.log打印数字的问题:

 为什么会打印数字7呢?

每一个setTimeout在执行时,会返回一个唯一ID,上图中的数字7,就是这个唯一ID。我们在使用时,常常会使用一个变量将这个唯一ID保存起来,用以传入clearTimeout,清除定时器。

setTimeout 与 闭包

思考:下面的输出是什么? 

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

 如果我们直接这样写,根据setTimeout定义的操作在函数调用栈清空之后才会执行的特点,for循环里定义了5个setTimeout操作。而当这些操作开始执行时,for循环的i值,已经先一步变成了6。因此输出结果总为6

思考:如何改造上面的代码让0-5顺序输出?

我们想要让输出结果依次执行,我们就必须借助闭包的特性,每次循环时,将i值保存在一个闭包中,当setTimeout中定义的操作执行时,则访问对应闭包保存的i值即可。

而我们知道在函数中闭包判定的准则,即执行时是否在内部定义的函数中访问了上层作用域的变量。我们需要包裹一层自执行函数为闭包的形成提供条件。

因此,我们只需要2个操作就可以完成题目需求,一是使用自执行函数提供闭包条件,二是传入i值并保存在闭包中。


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

当然,也可以在setTimeout的第一个参数处利用闭包。


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

还可以使用 setTimeout  的第三个参数来实现

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

setTimeout 的第三个参数会作为他内部的函数的参数传递进去。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值