setTimeout()

セットタイムアウト（非同期処理）

意味指定時間後に関数を実行

setTimeout()とは？

setTimeout()は、指定した時間が経過した後に、一度だけ関数を実行するためのメソッドです。

setTimeout()の具体的な使い方

ボタンクリックで遅延実行する例

<button onclick='useSetTimeout()'>setTimeoutの使用例</button>

<script>
function useSetTimeout() {
  console.log('ボタンがクリックされました');
  setTimeout(() => {
    alert('2秒経過しました！');
  }, 2000);
  console.log('setTimeoutが設定されました');
}
</script>

ボタンをクリックすると、即座にコンソールにメッセージが表示され、2秒後にアラートでメッセージを表示します。この例では、非同期処理の流れを理解することができます。

複数のsetTimeoutを使用した例

console.log('処理開始');

setTimeout(() => {
  console.log('1秒経過');
}, 1000);

setTimeout(() => {
  console.log('2秒経過');
}, 2000);

setTimeout(() => {
  console.log('3秒経過');
}, 3000);

console.log('setTimeout設定完了');

👇出力結果

処理開始
setTimeout設定完了
1秒経過
2秒経過
3秒経過

複数のsetTimeoutを使用して、異なる時間間隔で処理を実行する例です。この例では、非同期処理の順序と実行タイミングを理解することができます。

setTimeout()に関するよくある質問

Q. setTimeoutの時間は正確ですか？

A. setTimeout()の時間指定は必ずしも正確ではありません。指定時間は最小待機時間であり、実際の実行時間はJavaScriptの実行環境や他の処理の状況によって前後する可能性があります。

Q. setTimeoutをキャンセルできますか？

A. はい、clearTimeout()関数を使用してキャンセルできます。setTimeout()は一意のIDを返すので、それをclearTimeout()に渡すことでタイマーをキャンセルできます。

Q. 0ミリ秒を指定するとどうなりますか？

A. setTimeout(fn, 0)と指定しても、関数はすぐには実行されません。これは「次のイベントループで実行する」という意味になり、現在の処理が終わった後に実行されます。

setTimeout()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのsetTimeout()やrequestAnimationFrame()、catch()、finally()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。