JavaScript

JavaScriptのタイマーについて解説

JavaScriptのタイマーは、特定の時間が経過した後に関数を実行するための仕組みです。タイマーを使用すると、一定時間ごとに処理を繰り返したり、遅延して処理を実行したりすることができます。JavaScriptのタイマーには主に2つの関数があります：setTimeoutとsetIntervalです。

setTimeout関数

setTimeout関数は、指定した時間が経過した後に1回だけ関数を実行します。

基本的な構文

let timeoutID = setTimeout(function, delay, [param1, param2, ...]);
  • function: 遅延実行する関数。
  • delay: 遅延時間（ミリ秒）。
  • [param1, param2, ...]: （オプション）関数に渡す追加のパラメータ。

例

function sayHello() {
    console.log("こんにちは！");
}

// 3秒後にsayHello関数を実行
let timeoutID = setTimeout(sayHello, 3000);

タイマーのキャンセル

clearTimeout関数を使用して、setTimeoutタイマーをキャンセルできます。

let timeoutID = setTimeout(sayHello, 3000);

// タイマーをキャンセル
clearTimeout(timeoutID);

setInterval関数

setInterval関数は、指定した時間間隔で繰り返し関数を実行します。

基本的な構文

let intervalID = setInterval(function, delay, [param1, param2, ...]);
  • function: 繰り返し実行する関数。
  • delay: 繰り返しの間隔時間（ミリ秒）。
  • [param1, param2, ...]: （オプション）関数に渡す追加のパラメータ。

例

function sayHello() {
    console.log("こんにちは！");
}

// 2秒ごとにsayHello関数を実行
let intervalID = setInterval(sayHello, 2000);

タイマーのキャンセル

clearInterval関数を使用して、setIntervalタイマーをキャンセルできます。

let intervalID = setInterval(sayHello, 2000);

// 10秒後にタイマーをキャンセル
setTimeout(function() {
    clearInterval(intervalID);
}, 10000);

タイマーの応用例

1. カウントダウンタイマー

指定した時間からカウントダウンして0になったらメッセージを表示する例です。

let countdown = 10;

function updateCountdown() {
    console.log(countdown);
    countdown--;

    if (countdown < 0) {
        clearInterval(intervalID);
        console.log("タイムアップ！");
    }
}

// 1秒ごとにupdateCountdown関数を実行
let intervalID = setInterval(updateCountdown, 1000);

2. アニメーションの実行

一定時間ごとに要素の位置を更新してアニメーションを実行する例です。

let position = 0;
const box = document.getElementById("box");

function moveBox() {
    position += 5;
    box.style.left = position + "px";

    if (position >= 300) {
        clearInterval(intervalID);
    }
}

// 50ミリ秒ごとにmoveBox関数を実行
let intervalID = setInterval(moveBox, 50);

ディレイ実行と繰り返し実行の違い

  • setTimeout: 指定した時間が経過した後に1回だけ関数を実行します。遅延実行。
  • setInterval: 指定した時間間隔で繰り返し関数を実行します。繰り返し実行。

ディレイ実行と繰り返し実行の選択基準

  • 一度だけ特定の処理を遅延実行したい場合は、setTimeoutを使用します。
  • 一定間隔で特定の処理を繰り返し実行したい場合は、setIntervalを使用します。

まとめ

  • setTimeout関数: 指定した時間が経過した後に1回だけ関数を実行します。clearTimeoutでキャンセル可能。
  • setInterval関数: 指定した時間間隔で繰り返し関数を実行します。clearIntervalでキャンセル可能。
  • タイマーを使用して、ディレイ実行や繰り返し実行を実現できます。

これでJavaScriptのタイマーについての基本的な理解が深まったと思います。

スポンサーリンク

-JavaScript