JavaScriptで指定時間、処理を待機する方法(sleep処理・setTimeout)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで指定時間、処理を待機する方法(sleep処理・setTimeout)について解説していきます。

JavaScriptで指定時間、処理を待機する方法(sleep処理・setTimeout)

JavaScriptには、sleep関数が用意されていませんが、setTimeout関数を使用して指定時間だけ処理を待機することができます。

次のSampleCodeは、指定された時間（ミリ秒単位）だけ処理を待機するsleep関数を実装したものです。

この例では、async/awaitキーワードを使用して、Promiseオブジェクトがresolveされるまで待機します。

このようにして、指定時間だけ処理を待機することができます。

// Sleep関数
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
};

async function myFunction() {
  console.log('処理を開始します');
  await sleep(3000);
  console.log('3秒間待機しました');
  // ここから後続の処理を実行する
};

myFunction();

setTimeoutで指定時間、処理を待機してから処理を実行する

JavaScriptで指定時間後に、処理を実行したいときは、setTimeoutを使用します。

先述のsleep関数も内部的には、setTimeoutを使用しているだけです。

setTimeout( 
  async () => {
  // 3秒後に実行したい処理を記述する
  console.log('3秒間待機しました');
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/');
  console.log(await res.json());
}, 3000);

setTimeoutに関しては、以前の記事で紹介しています。

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます！Follow Me！

最近の投稿

2024年1月17日【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 2024年1月17日JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) 2023年12月30日PythonでCSVをJSONに変換する方法 2023年12月30日PythonでCSV・Dataframeを指定の行数まで切り取る方法 2023年12月28日JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 2023年12月28日VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法