More than 3 years have passed since last update.

ES2017のasync/awaitを使って「同期的sleep処理」をワンライナーで書く

Last updated at 2021-06-10Posted at 2017-08-28

async関数の中であれば、この1行でOK！

await new Promise(resolve => setTimeout(resolve, 5000));

JavaScriptで同期的sleep()関数を作る例は巷に色々と転がってますが、
ワンライナーでサクッと書けるのが嬉しいと思うのです。いい時代になった

実用例はこんな感じね。
ChromeのDevTools Consoleにコピペすれば動きますよ〜。

(async () => {
  alert('ザ・ワールド！');
  await new Promise(resolve => setTimeout(resolve, 5000));
  alert('5秒経過！時は動き出す・・・');
})();

※注意
2017年8月現在、ES2017のasync/awaitを使えるブラウザは限られてます。
特にスマホ系は厳しい。
本番環境で使う時は、BabelでES5にコンパイルするのをお勧めします。

2018-09-14追記：
この一年で、ブラウザのasync/await対応かなり進みましたね！IE以外はもうパーフェクト！嬉しい。
しかも、Chromeでは「トップレベルawait」が実現しとるではないですか！これ本当に便利。今後ほかのブラウザも対応していくのかな？

トップレベルawait対応してるブラウザではasync関数で括らなくても良いので、冒頭に書いたawait new Promise(resolve => setTimeout(resolve, 5000))これ1行でOKですねっ！