JavaScript

最終更新日:
公開日:

レシピ

実行するタイミング

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

指定した時間が経過すると特定の処理を実行する方法について解説します。

この記事のポイント

  • setTimeoutメソッドは指定した時間が経過すると1度だけ処理を実行する
  • setTimeoutメソッドの設定を解除したいときはclearTimeoutメソッドを使う
  • 一定時間が経過する度に処理を繰り返し実行したいときはsetIntervalメソッドを使う

目次

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

指定した時間が経過したタイミングで処理を実行するときは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パラメータで指定した引数を全て出力します。

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('キャンセルしました');
  });

});

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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