JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのsetTimeout()メソッドとは？基本構文と実用例をわかりやすく解説

setTimeout()メソッドとは

setTimeout()は、JavaScriptが標準で備えているタイマー系イベント処理の一つです。JavaScriptではwindowオブジェクトを使うことで、指定した時間間隔でコードを実行できます。その中でもsetTimeout()は、「一定時間が経過した後に特定の関数を実行する」ためのメソッドとして広く使われています。

setTimeout()には2つの引数を渡します。1つ目は実行したい関数、2つ目は関数を実行するまでの待ち時間をミリ秒単位で指定する時間です。たとえば「2000」と指定すれば2秒後、「3000」と指定すれば3秒後に関数が実行されます。

基本構文

window.setTimeout(function, milliseconds);

windowオブジェクトはグローバルオブジェクトであるため、実際のコードでは「window.」を省略してsetTimeout(function, milliseconds)のように書くのが一般的です。

例1：2秒後にメッセージを表示する

次の例では、setTimeout()に「2000（ミリ秒）＝2秒」を指定しています。ページを読み込んでから2秒後にコールバック関数が実行され、画面にメッセージが出力されます。

<html>
<body>
<p>2秒お待ちください</p>
<script>
    setTimeout(function(){
       document.write("Tutorix is the best e-learning platform");
    }, 2000);
</script>
</body>
</html>

出力結果

wait 2 seconds
Tutorix is the best e-learning platform

 

例2：3秒後に要素の内容を書き換える

次の例では、setTimeout()に「3000（ミリ秒）＝3秒」を指定しています。3秒後に関数が実行され、id属性「time」を持つ<p>要素の内容が書き換えられます。このように、setTimeout()はDOM操作と組み合わせることで、動的なWebページの演出にも活用できます。

<html>
<body>
<p id = "time"></p>
</p><script>
   setTimeout(function(){
      document.getElementById("time").innerHTML = "Tutorix is the product of Tutorialspoint";
   }, 3000);
</script>
</body>
</html>

出力結果

Tutorix is the product of Tutorialspoint.

このようにsetTimeout()メソッドを使えば、指定した時間の経過後に任意の処理を簡単に実行できます。遅延表示やアニメーション制御、一定時間後の自動処理など、さまざまな場面で活躍する基本的かつ重要なメソッドなので、ぜひマスターしておきましょう。

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2