一定時間が経過したら処理を実行する

一定時間が経過したときに指定した処理を実行する

指定した時間が経過したタイミングで処理を実行するときはsetTimeoutメソッドを実行します。

以下の例は、ページの読込完了後に0.5秒後、1秒後、5秒後、10秒後にそれぞれコンソールへメッセージを出力します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // 0.5秒後に実行
  setTimeout(() => {
    console.log("Execution 0.5sec"); // Execution 0.5sec
  }, 500);

  // 1秒後に実行
  setTimeout(() => {
    console.log("Execution 1sec"); // Execution 1sec
  }, 1000);

  // 5秒後に実行
  setTimeout(() => {
    console.log("Execution 5sec"); // Execution 5sec
  }, 5000);

  // 10秒後に実行
  setTimeout(() => {
    console.log("Execution 10sec"); // Execution 10sec
  }, 10000);

});

setTimeoutメソッドは第1パラメータに実行する関数、第2パラメータにタイマー、第3パラメータに関数に渡す引数（任意）を指定することができます。

タイマーはミリ秒単位で指定し、タイマーの秒数が経過すると第1パラメータの関数を実行します。
例えば以下のように実行すると、1秒後にコンソールへ第3パラメータで指定した引数を全て出力します。

JavaScript コード例

setTimeout((args) => {

	// ここに実行する処理を記述
	for(var v of args) {
		console.log(v);
	}

}, 1000, ["add","parameter","args"]);

第3パラメータに指定した引数「["add","parameter","args"]」は、第1パラメータの関数に変数argsへ代入して渡します。
第1パラメータの引数を受け取る変数名は自由に設定でき、また第3パラメータの引数も任意なので省略可能です。

setTimeoutメソッドは一定時間が経過したら指定した処理を1度だけ実行しますが、もし定期的に処理を繰り返したいときはsetIntervalメソッドを使うことで実現できます。
詳しくは「定期的に処理を実行する」をご覧ください。

設定したタイマーをキャンセルする

setTimeoutメソッドで実行するまでの時間（タイマー）を設定するとtimeoutIDが作成されて戻り値になります。
このtimeoutIDを使ってclearTimeoutメソッドを実行すると、設定したタイマーによる処理の実行はキャンセルすることができます。

以下の例ではsetTimeoutメソッドで作成したtimeoutIDを変数timeout_idに入れておき、ボタンがクリックされたらキャンセルします。
ボタンがクリックされずにタイマーで設定した時間になると、予定通り処理が実行されます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const btn_cancel = document.getElementById('btn_cancel');
  var timeout_id = null;

  timeout_id = setTimeout(() => {
    console.log('Hello'); // ボタンがクリックされなければ3秒後にコンソールへ「Hello」を出力
  }, 3000);

  // id属性「btn_cancel」のボタンがクリックされたらタイマーを解除
  btn_cancel.addEventListener('click', () => {
    clearTimeout(timeout_id);
    console.log('キャンセルしました');
  });

});

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。