关于闭包问题的多种方法

https://juejin.im/post/58f1fa6a44d904006cf25d22
这是一篇关于闭包的文章,看完感触很深。尽管很多人都可以知道闭包的结果会带来什么但是却很少人深究为什么。


考察

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}

console.log(new Date, i);

结果是5,5,5,5,5,5。
第一个5是最后一个输出语句的,由于循环执行很快,所以还没等setTimeout到时间就执行完毕了。
其次的5是循环语句里面的。但是它们的先后顺序又是如何呢?
答案是几乎同步。
上面说了,for循环执行起来速度很快,加上所有定时器的时间都是1秒,所以几乎是同步完成的输出。
但,为什么都是5呢?
因为在该语句里,i是按引用传递的,所以当i为5时才执行setTimeout,当然输出为5了。


我想实现输出与下标相同

很多人一定都可以给出下面的答案

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

意料之中,输出为0,1,2,3,4。
有没有别的写法呢?肯定有

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

发现不同了吗?
仅仅需要把var->let就可以实现同样功能。由于let的特性,i会只存在于for这个作用域中。

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

函数的参数是按值传递的。因此传入的i非引用。


输出顺序

若想实现,等待每一次输出都在上一次输出的下一秒呢?

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

很聪明的答案,只需要等待下标秒数即可。
其他的答案,更好的?
Promise

const task = [];
for(var i = 0; i < 5; i++) {
    task.push(new Promise((resolve) => {
        setTimeout(function(j){
            return ()=>{console.log(j);
                        resolve();}
        }(i), 1000*i);
    }));
}
Promise.all(task).then(()=>{
    setTimeout(()=>{console.log(i);}, 1000);
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值