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

JavaScriptで関数の呼び出しを遅延させる方法｜setTimeout()の基本と使い方

JavaScriptで関数の実行を遅らせたい場合には、setTimeout() 関数を使用します。setTimeout()は、指定したミリ秒（1/1000秒）が経過した後に、指定された関数を一度だけ実行するための組み込みメソッドです。

setTimeout() の構文

setTimeout(functionname, milliseconds, arg1, arg2, arg3...)

各パラメータの意味は以下のとおりです。

  • functionname － 実行したい関数の名前、または関数そのものを指定します。
  • milliseconds － 遅延させる時間をミリ秒単位で指定します。例えば5000ミリ秒は5秒に相当します。
  • arg1, arg2, arg3... － 実行時に関数へ渡す引数です。必要に応じて複数指定できます。

サンプルコード

以下のコードでは、ボタンをクリックすると setTimeout() のコールバックによって5秒後にアラートが表示されます。実際に動かして挙動を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="timeFunction()">送信</button>
      <script>
         function timeFunction() {
            setTimeout(function(){ alert("5秒経過しました！"); }, 5000);
         }
</script>
<p>上のボタンをクリックして、5秒間お待ちください。</p>
</body>
</html>

補足ポイント

setTimeout()はコールバック関数を受け取るため、無名関数だけでなく、あらかじめ定義した関数名を渡すことも可能です。また、タイマーをキャンセルしたい場合は、setTimeout()の戻り値であるタイマーIDを clearTimeout() に渡すことで処理を中止できます。一定間隔で繰り返し実行したい場合は、代わりに setInterval() を使用するとよいでしょう。

  1. クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

    JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ