async/awaitでsleep処理を書く

jsでsleepをしたい場合、setTimeoutを使う。

(() => {
  console.log('sleep');
  setTimeout(() => {
    console.log('wake up');
    
    console.log('sleep again');
    setTimeout(() => {
      console.log('wake up');
    }, 3000);
  }, 3000);
})();

が、複数回sleepをしたい場合にcallback地獄になってしまう。

そこで、Promiseを返すようにしてasync/awaitでsleep処理を書き直すと上から順にコードを読んでいけるので分かりやすくなる。

const sleep = msec => {
  return new Promise(resolve => {
    setTimeout(resolve, msec);
  });
};
  
(async () => {
  console.log('sleep');
  await sleep(3000);
  console.log('wake up');
  
  console.log('sleep again');
  await sleep(3000);
  console.log('wake up');
})();

参考

• JavaScript Promiseの本