setTimeout与for

如何让下面的代码输出0，1，2，3，4？

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

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

//法2 闭包
for(var i=0;i<5;i++){
  (function(i){
    setTimeout(()=>{
      console.log(i)
    }, 1000)
  })(i)
}
//法3 setTimeout第三个参数
for (var i = 0; i< 5; i++){
  setTimeout((i) => {
    console.log(i);
  }, 1000, i)
}

然而上述解法有个致命的缺点，没有每隔一秒依次输出0,1,2,3,4

考虑异步

for await

for await (let n of generator())实现异步

async function sleep(t){
  return new Promise(r=>setTimeout(()=>r(), t*1000))
}
async function* steps(){
  let i=0;
  let len = 5;
  while(i<len){
    await sleep(1)
    yield i++
  }
}
(async function(){
  for await (let i of steps()){
    console.log(i)
  }
})()

async/await

for在async/await中自然异步

(async function(){
  for(var i=0;i<5;i++){
    await timeoutPromise(i)
  }
})();

async function timeoutPromise(i){
  return new Promise(r=>{
    setTimeout(()=>{
      console.log(i)
      r()
    }, 1000)
  })
}