【JavaScript】のタイマー機能 setTimeout()、setInterval()

Webページで使っているJSでは、出てくることも多いので、改めて調べてまとめました。

・引数に指定した待ち時間の経過後に、関数を1度だけ実行させます。
・処理を遅延させたい時、例えばコンテンツの非表示を遅らせる時などに使います。
・clearTimeout(timerId) を使って止めることが可能です。

構文は以下です。

setTimeout(関数, 待ち時間);

・第1引数には時間経過後に実行される処理（関数）を、第2引数には待ち時間をミリ秒で指定。

<h1 id="text">そうはならんやろ</h1>

function change() {
    const target = document.getElementById('text');
    target.innerHTML = 'なっとるやろがい！';
}

setTimeout(change, 3000);

結果：3秒後にH1のテキスト内容が変わります。

<h1 id="text">'なっとるやろがい！</h1>

・引数に指定した待ち時間ごとに、関数を実行させます。
・止める記述が無い限り、時間ごとに延々と繰り返されます。
・clearInterval(timerId) を使って止めることが可能です。

構文は以下です。

setInterval(関数, 待ち時間);

・第1引数には時間経過後に実行される処理（関数）を、第2引数には待ち時間をミリ秒で指定。（全てsetTimeoutと同じ指定）。

<h1 id="text">そうはならんやろ</h1>

function change() {
    console.log('なっとるやろがい！');
}

setInterval(change, 3000);

結果：3秒ごとにコンソールにテキストが出力され続けます。

・参考にさせていただいた記事
developer.mozilla.org
qiita.com

kaibukuroのブログ