【ES7】JavaScriptでn秒待つ関数

お仕事をしているときに1秒間に規定の数しか送れないという制約があるAPIを使っていて 規定数送ったらn秒待ってからループを再開という仕組みを作りたかったのでその備忘録です。

効率とか正しさは求めていません。

とりあえず関数を定義してその関数を呼出引数に止めたい秒数を入れるだけで その行で指定秒止まってくれる関数を作りましょう。

ウェイト関数の定義

前提条件としてasync awaitが使える状況であることに注意してください。

いわゆるES7以上ですね。

node.jsで開発してBabelを使ってトランスパイルをすれば ES5でも使用できるように変換できますので各自変換を行ってください。

今回はnode.jsでの動作を前提とした作りになっています。

// ミリ秒間待機する
const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}

PromiseとsetTimeoutを使った仕組みになっています。 秒数はミリ秒で指定するので1秒は1000という数値になります。

使い方は以下のような感じです。

await sleep(1*1000);

上記は1秒終わるまで待つといった感じですね。

awaitはasyncがついている関数の内部じゃないと使えないので注意してください。

実際に使うとこんな感じのコードになります。

// ミリ秒間待機する
const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const sendMessage = async() => {
  console.log("メッセージを送信します。");
  console.log("3秒待機...");
  await sleep(3*1000);
  console.log("3秒経過。関数を終了します");
}

// 実際の関数の呼び出し
sendMessage();

これで3秒経過後にコンソールログが表示されるような仕組みになりました。

asyncを引数になるカッコの前につけるのを忘れないでください。

async awaitを使うことでawaitの部分が終わるまで処理を待ってくれるようになります。

最低n秒まってから動かしたいっていう状況が出たときに非常に便利ですね。

async関数なのでawaitで止めている間もプログラム自体は止まらず動き続けてくれているので フリーズせずにいい感じに待機してくれます。

非同期処理にしないとブラウザであれば処理が終わるまでぐるぐる回るローディングで ブラウザが固まってしまいますのでウェイト関数を使うときはかならず非同期関数の中で行いましょう。

ただ、非同期関数じゃないところで今回のウェイト関数をawaitなしで呼ぶと 単純にウェイト関数だけ止まってその後の処理は普通に動いてしまうのでウェイトの意味がないって感じですね。

今回は備忘録なのでここまで!

結構何回かこのやり方を使っては忘れての繰り返しだったので自分用に残しておきます。