😸

【JavaScrpipt】タイマー

に公開
JavaScript
tech

setInterval()

  • 一定周期ごとに命令を繰り返す
  • 処理の実行終了と開始が重なり、重くなる可能性がある
console.log(new Date()); // ページ読み込み直後に表示
setInterval(() => {
    console.log(new Date());
}, 1000); // ページを読み込んで1秒後ごと。（第2引数でミリ秒後ごとかを指定）

let count = 3;
const intervalId = setInterval(() => {
    console.log(count);
    count--;
    if (count < 0) { // カウントダウンがマイナスになる条件
        clearInterval(intervalId); // setIntervalを止める命令
    }
}, 1000);

setTimeout()

  • 処理を終了するごとに命令を繰り返す。
  • setIntervalとは異なり、処理の実行終了と開始が重なることがない
setTimeout(() => {
    // console.log('遅れて表示');
    window.location.href = 'リダイレクト先URL等'; // 遅れてリダイレクト
}, 3000); // 処理を実行して3秒後ごと。（第2引数でミリ秒後ごとかを指定）

console.log('Page loaded'); // setTimeoutの処理よりも前に表示されている

const pElement = document.querySelector('p');
const buttonElement = document.querySelector('button');
let timeoutId;

// 再帰関数
function showClock() {
    timeoutId = setTimeout(() => {
        pElement.textContent = new Date();
        showClock();
    }, 1000);
}

buttonElement.addEventListener('click', () => {
    clearTimeout(timeoutId); // setTimeout を止める命令
});

showClock();

Discussion