【JavaScript】setTimeout()とsetInterval()を使用して、カウントダウンタイマー機能を実装する

setTimeout()・setInterval()とは
実装してみた
カウントダウンタイマーの実装方法
1. 例1のコード
2. 例2のコード
まとめ

setTimeout()・setInterval()とは

setTimeout()：ブラウザに対して指定した時間が経過した後に、ある関数を呼び出すよう指定する

setTimeout(()=> { 関数 }, ミリ秒単位);

setInterval()：指定した時間の間隔で、ある関数を繰り返し呼び出すよう指定する

setInterval(()=> { 関数 }, ミリ秒単位);

ミリ秒単位：ミリ秒は1000分の1秒なので、1秒だったら1000ミリ秒

実装してみた

カウントダウンタイマー機能のある2種類の例を用意しました。

スタートボタンを押すと、秒数のカウントが始まり、10秒後にカウントが止まります。

どちらも同じ動きをしますが、コードの内容が違います。

See the Pen timer by TKG1 (@tkg1) on CodePen.

カウントダウンタイマーの実装方法

<button>スタート</button>

<div id="result1">例1</div>
<div id="result2">例2</div>

let button = document.querySelector('button');
let result1 = document.querySelector('#result1')
let result2 = document.querySelector('#result2')
let count = 1;

// ckickした時に発火
button.addEventListener('click', () => {
  button.disabled = true;
  
  let startTime = new Date;
  result1.innerHTML = '例1 経過秒数: 0秒';
  result2.innerHTML = '例2 経過秒数: 0秒';
  
  // 例1のコード
  let startTimer1 = setInterval(()=> {                      
    let nowTime = new Date;
    let elapsedTime = Math.floor((nowTime - startTime) / 1000);
    result1.innerHTML = '例1 経過秒数: ' + elapsedTime + '秒';
  }, 1000);
  
  // 例2のコード　　　　 
  let startTimer2 = setInterval(()=> {                   
    result2.innerHTML = '例2 経過秒数: ' + count + '秒';
    // １秒毎にcountに+1している
    count++;
  }, 1000);
  
  // 例1のコードを止める
  setTimeout(() => {
    clearInterval(startTimer1); 
    result1.innerHTML = "Time UP";
  }, 10000);
  
  // 例2のコードを止める
  setTimeout(() => {
    clearInterval(startTimer2); 
    result2.innerHTML = "終了〜";
  }, 10000);
});

例1のコード

スタートボタンを押した時間(startTime)とsetInterval()が実行された時の時間(nowTime)の時間の差を1000で割って、秒数を表示しています。

  // 例1のコード
  let count = 1; 

  button.addEventListener('click', () => {
    button.disabled = true;
  
    // ボタンクリック時のDateオブジェクトを作成
    let startTime = new Date;
    result1.innerHTML = '例1 経過秒数: 0秒';

    // ボタンクリックしてから、1秒後に関数を実行。その後は1秒毎に関数を繰り返し実行する。
    let startTimer1 = setInterval(()=> {       
      //　1秒毎にDateオブジェクトを作成               
      let nowTime = new Date;
      // 秒数の表示はDateオブジェクトを1000で割る。
      let elapsedTime = Math.floor((nowTime - startTime) / 1000);
      result1.innerHTML = '例1 経過秒数: ' + elapsedTime + '秒';
    }, 1000);

    // 10秒後にstartTimer1を止めて、'TimeUP'を表示
    setTimeout(() => {
      // startTimer1の実行を止める
      clearInterval(startTimer1); 
      result1.innerHTML = "Time UP";
    }, 10000);
  });

例2のコード

変数countにsetInterval()の処理が繰り返されるたびに+1をしていき、その数字を表示しています。

  // 例2のコード
  button.addEventListener('click', () => {
    button.disabled = true;
  
    // ボタンクリック時の、Dateオブジェクトを作成
    result2.innerHTML = '例2 経過秒数: 0秒';　　　
    let count = 1; 

    // 例2のコード
    let startTimer2 = setInterval(()=> {                   
      result2.innerHTML = '例2 経過秒数: ' + count + '秒';
      // １秒毎にcountに+1している
      count++;
    }, 1000);

    // 10秒後に例2のstartTimer2を止める
    setTimeout(() => {
      clearInterval(startTimer2); 
      result2.innerHTML = "終了〜";
    }, 10000);
  });

両方ともsetInterval()の繰り返す実行する時間を1秒に指定し、

setTimeout()で10秒後にsetInterval()を止める関数(clearInterval())を呼び出しています。

clearInterval()は、引数にsetInterval()の値の変数(startTimer)を渡せば、関数の実行を停止できます。