先看一段代码
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i);
}, i * 1000);
}
输出结果是什么?? 肯定有好多人以为是 0 1 2 3 4
这么想当然是错
的,因为setTimeout()执行的是一个异步的操作,那能异步到什么地步呢,就是当所有的代码执行完毕之后,才会执行setTimeout() 所以当setTimeout函数执行的时候for循环早就已经执行完毕了,那么此时的i值就是5 所以正确的结果就是 5 5 5 5 5
- 现在来思考一个问题,假如说我就是想用这种方式来实现输出0 1 2 3 4呢??有可能吗?怎么实现呢?
- 不卖关子了,明确的说使用闭包的原理可以解决这个问题。
闭包在JS中被称为神话一样的存在
要想形成闭包一个必要的条件,你得有一个父级的函数,包括住延时器,当延时器在被调用的时候,延时器与foo内部的上下文形成闭包,类似于下面这样
for (var i = 0; i < 5; i++) {
function foo() { //父级函数
setTimeout(() => {
console.log(i);
}, i * 1000);
}
foo()
}
- 如上父级函数foo包括住了延时器setTimeout,但是现在我们运行仿佛结果还是 5 5 5 5 5 怎么回事哪里出错了吗???
- 究其原因原来是因为,setTimeout在调用的时候虽然与foo()的内部形成了闭包,但是我们并没有把i的值给限定在每一个闭包里面,于是改成下面的代码就可以如愿以偿了
for (var i = 0; i < 5; i++) {
function foo(i) { //父级函数
setTimeout(() => {
console.log(i);
}, i * 1000);
}
foo(i)
}
或者是利用let的块级作用域来实现
for (let i = 0; i < 5; i++) {
function foo() { //父级函数
setTimeout(() => {
console.log(i);
}, i * 1000);
}
foo()
}
PS:以下是我的个人博客小站,欢迎关注哦
戳我戳我