分享一个有意思的JS题目，循环打印，可以有几种解法？

有的好题目确实也可以串联一大部分的知识点！

循环打印，想必大家都是信手拈来了。但是你有多少种方式实现呢？

es5这种情况想必不陌生

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

但是又es6的块级作用域就迎刃而解

for(let i=0;i<5;i++){
    setTimeout(() => {
        console.log(i)
    }, 1000);
    
}
// 0
// 1
// 2
// 3
// 4

但是呢，用闭包来解决es5的问题也很容易

for(let i=0;i<5;i++){
   (function(i){
    setTimeout(() => {
        console.log(i)
    }, 1000);
   })(i)
    
}
// 0
// 1
// 2
// 3
// 4

但是除了这种方式，还有什么方法么？

答案是有的：setTimeout第三个参数

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

// 0
// 1
// 2
// 3
// 4

如图，从setTimeout第三个参数开始的参数都会传给回调函数当作参数。

这个现象是隔一秒之后，一次性打印出来，那又没有办法实现完全的异步打印，一个隔一秒呢？

for(let i=0;i<5;i++){
    setTimeout(() => {
        console.log(i)
    }, 1000*i);
   }
// 0
// 1
// 2
// 3
// 4

在事件参数那个地方做一个改动就好了。那假如我也想用promise和async/await实现，怎么办？那得事先初始化一个sleep函数。

 

let sleep=function(time,i){
    return new Promise(resolve=>{
        setTimeout(() => {
            resolve(i)
        }, time);
    })
}

async  function start(){
    for(let i=0;i<5;i++){
        let result= await sleep(1000,i)
        console.log(result)
    }
}
start()

// 0
// 1
// 2
// 3
// 4

这样也可以很轻松实现一个异步打印。async/await让写法完全是像在写同步代码，既然async/await是promise的语法糖，那么纯promise怎么写呢？

let sleep=function(time,i){
    return new Promise(resolve=>{
        setTimeout(() => {
            resolve(i)
        }, time*i);
    })
}
    for(let i=0;i<5;i++){
        sleep(1000,i).then(res=>{
            console.log(res)
        })
    }
// 0
// 1
// 2
// 3
// 4

当然也是可以的。暂时先分享到这里，如果有小伙伴还有其他的想法可以在评论区留言，一起学习共同进步！