2024/12/05 (更新日:2024/12/11)

【JavaScript】「setTimeout()」と「clearTimeout()」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

今回はJavaScriptの基本的な組み込み関数の「setTimeout()」と「clearTimeout()」について解説します。

時間を指定してコードを遅延実行したいときに使える便利な関数です。

初心者の方でも理解しやすいように、例を交えながら説明していきます！

この記事の内容！

また、下の動画でも「setTimeout()」と「clearTimeout()」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「setTimeout()」とは？

setTimeout()は、指定した時間（ミリ秒単位）が経過した後に、特定の関数を一度だけ実行する関数です。

setTimeout(関数, 遅延時間);

パラメータ

関数: 実行したいコードまたは関数を指定します。

遅延時間: 実行までの遅延時間（ミリ秒単位）を指定します。1秒 = 1000ミリ秒です。

setTimeout(() => {
    console.log("2秒が経過しました！");
}, 2000);

例えば、上記は2秒後にメッセージを表示するコードになります。

このコードを実行すると、2秒後にコンソールに「2秒が経過しました！」と表示されます。

第二引数の単位は「ミリ秒」なので注意しましょう！

function showMessage() {
    console.log("3秒後にこのメッセージが表示されます！");
}

setTimeout(showMessage, 3000);

このようにすると、コードが読みやすくなり、再利用もしやすくなります。

function greet(name) {
    console.log(`こんにちは、${name}さん！`);
}

// 2秒後に関数を実行し、"太郎"を渡す
setTimeout(greet, 2000, "太郎");

const timerId = setTimeout(() => {
    console.log("このメッセージは表示されません！");
}, 5000);

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

setTimeout()で設定したタイマーをキャンセルするには、clearTimeout()を使用します。

「setTimeout()」の「返り値」は「timeoutID」と呼ばれます。この「timeoutID」を「clearTimeout()」の引数に与えてあげれば、その「timeoutID」に紐づく「setTimeout()」の処理がキャンセルされます。

このように「timeoutID」はキャンセルする「setTimeout()」の識別のために使われるのです。

clearTimeout(timeoutID)を呼び出すと、タイマーが無効化され、関数は実行されません。

setTimeout()は、シンプルながら非常に強力な関数です。以下のポイントを押さえておきましょう。

イベント処理やアニメーションの制御など、さまざまな場面で役立つので、ぜひ覚えて活用してみてください！

それではまたっ！