【JavaScript入門】指定した時間が経過したら処理を実行するsetTimeoutメソッドの使い方

3秒後にメソッドを呼び出したい。10秒後にメソッドを呼び出したい。など、指定した時間を経過したらメソッドを呼び出したい時に使えるのがsetTimeoutです。

setTimeoutの使い方
setTimeoutで指定した処理をキャンセルする方法
setTimeoutの実行順序について

目次へ

`setTimeout`の使い方

書式

setTimeout(実行したい処理,何秒後に実行するかをミリ秒で指定)
例えば、3秒後に実行したい場合は以下のように記述します。
setTimeout(func,3000)

以下のサンプルでは、「スタート」ボタンを押すと3秒後に「3秒経過しました。」と表示されます。

See the Pen
setTimeout by shiakisudev (@shiakisu)
on CodePen.

以下はサンプルコードです。

HTML

<button id="start">スタート</button>
<div id="result"></div>

document.addEventListener('DOMContentLoaded',function(){
  //タイマーID
  let timerID;

  //クリック時に呼び出される関数。
  function start(){

    function print(){

      document.getElementById('result').innerHTML += '3秒経過しました。<br>';
    }

    //3秒後にprint()を実行。
    timerID = setTimeout(print,3000);

  }

  //イベントリスナー登録（スタート）
  document.getElementById('start').addEventListener('click',start,false);

},false);

解説

スタートボタンを押すとdocument.getElementById('start').addEventListener('click',start,false);の処理が最初に実行されます。
次にtimerID = setTimeout(print,3000);の処理が実行されます。
3000ミリ秒なので、3秒後にprint()が実行され、画面に「3秒経過しました。」と表示されます。

`setTimeout`で指定した処理をキャンセルする方法

書式

window.clearTimeout(timerID);
setTimeout実行時に発行されるIDを指定することにより、処理をキャンセルすることができます。

以下のサンプルでは、「スタート」ボタンを押下してから3秒以内に「キャンセル」ボタンを押下することで、「3秒経過しました。」と表示されないようにすることができます。

See the Pen
setTimeout2 by shiakisudev (@shiakisu)
on CodePen.

以下はサンプルコードです。

HTML

<button id="start">スタート</button>
<button id="cansel">キャンセル</button>
<div id="result"></div>

document.addEventListener('DOMContentLoaded',function(){
  //タイマーID
  let timerID;

  //「スタート」ボタン押下時に呼び出される関数。
  function start(){

    function print(){

      document.getElementById('result').innerHTML += '3秒経過しました。<br>';
    }

    //3秒後にprint()を実行。
    timerID = setTimeout(print,3000);

  }

   //「キャンセル」ボタン押下時に呼び出される関数。
  function cansel(){
    //タイマーを終了する。
    window.clearTimeout(timerID);
    //キャンセルした旨を画面に表示する。
    document.getElementById('result').innerHTML += "キャンセルされました。<br>";
  }

  //イベントリスナー登録（スタート）
  document.getElementById('start').addEventListener('click',start,false);

  //イベントリスナー登録（キャンセル）
  document.getElementById('cansel').addEventListener('click',cansel,false);
},false);

`setTimeout`の実行順序について

setTimeoutを使う上で1つ気をつけておきたいのがsetTimeoutで指定した処理は3秒間待ってくれますが、後続の処理は待ってくれないということです。
以下のサンプルでは、「スタート」ボタンを押下すると①「ここはsetTimeoutよりも前の行です。」②「ここはsetTimeoutよりも後ろの行です。」③「3秒経過しました。」の順で画面に表示されることが確認できます。

See the Pen
setTimeout3 by shiakisudev (@shiakisu)
on CodePen.

以下はサンプルコードです。

HTML

<button id="start">スタート</button>
<button id="cansel">キャンセル</button>
<div id="result"></div>

document.addEventListener('DOMContentLoaded',function(){
  //タイマーID
  let timerID;

  //「スタート」ボタン押下時に呼び出される関数。
  function start(){

    document.getElementById('result').innerHTML += 'ここはsetTimeoutよりも前の行です。<br>';

    function print(){

      document.getElementById('result').innerHTML += '3秒経過しました。<br>';
    }

    //3秒後にprint()を実行。
    timerID = setTimeout(print,3000);

    document.getElementById('result').innerHTML += 'ここはsetTimeoutよりも後ろの行です。<br>';

  }

   //「キャンセル」ボタン押下時に呼び出される関数。
  function cansel(){
    //タイマーを終了する。
    window.clearTimeout(timerID);
    //キャンセルした旨を画面に表示する。
    document.getElementById('result').textContent += "キャンセルされました。";
  }

  //イベントリスナー登録（スタート）
  document.getElementById('start').addEventListener('click',start,false);

  //イベントリスナー登録（キャンセル）
  document.getElementById('cansel').addEventListener('click',cansel,false);
},false);