Zenn
📖

JavaScript (setIntervalとsetTimeoutの違い)

2023/05/19に公開
JavaScript
#
学習
#
メモ
tech

最近 ReactやNext.js、Node.jsばかりを触っていて、 Vanilla JSを触れていなかった。
久々にタイマーやストップウォッチを作ってみることにした。
時間系の関数を理解できていなかったため、改めてまとめることにした。
そこで出てきたポイントをまとめています。

setIntervalとsetTimeoutの違いは？

setInterval→何回も
setTimeout→一度だけ(何回もできはする)

setInterval

何度も繰り返し

main.js
function showtime(){
console.log(new Date());
};
setInterval(showtime,1000);

止める

main.js
let i=0;
function showtime(){
console.log(new Date());
i++
if(i>2){
clearINterval(intervalID)
};

 let interalID= setInterval(showtime,1000);

setTimeout

一度だけ

main.js
function showMessage() {
  console.log("メッセージを表示します");
}
setTimeout(showMessage, 5000); // 5秒後に一度だけshowMessage関数を実行

何度も

main.js
function playslide() {
  setTimeout(() => {
    playslide();
  }, 1000);
}
playslide(); // これを実行すると1秒ごとに繰り返し実行されます

止める

main.js
function playslide() {
  console.log("スライドを再生します");
  clearInterval(intervalID);
}

const intervalID = setInterval(playslide, 1000); // 1秒ごとに実行

// 5秒後にsetIntervalを停止する（任意のタイミングで停止する場合）
setTimeout(() => {
  clearInterval(intervalID);
}, 5000); // 5秒後に実行

カウントダウンタイマー

ボタンを押すと10秒からカウンドダウンしていく。

main.js
'use strict';
{
  const timer = document.getElementById('timer');
  const btn = document.getElementById('btn');
  let endTime;
  let intervalID;
  function check() {
   let countdown = endTime - new Date().getTime();
    // 呼ばれるたびに、呼び出されて再代入されないからconstで良い
    if (countdown < 0) {
      clearInterval(intervalID);
      countdown = 10 * 1000;
      btn.classList.remove('active');
      btn.disabled = false;
    }
    const totalSecounds = Math.floor(countdown / 1000);
    const minute = Math.floor(totalSecounds / 60);
    const secounds = totalSecounds % 60;

    const formatminute = String(minute).padStart(2,0)
    const formatsecounds = String(secounds).padStart(2,0)
    // 二桁で埋まらなかったら、０を入れる。これは文字列しか取らないか
    // ら。stringで文字に
    timer.textContent = `${formatminute}:${formatsecounds}`;
    // 上から考えていって、ifの中は条件に合うまで無視する
  }

 
  btn.addEventListener('click', () => {
    endTime = new Date().getTime() + 10 * 1000;
    // letは変化するだけであって、letで何回も書いていいわけではない.
    // gettimeを使ってあげることで、ミリ秒にする
    intervalID = setInterval(check, 100);
    btn.classList.add('active');
    btn.disabled = true;

  })
}
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <p id="timer">00:10</p>
    <button id="btn">start</button>
  </main>
  <script src="main.js"></script>
</body>
</html>

ストップウォッチ

main.js
const timer = document.getElementById('timer');
const start = document.getElementById('start');
const stop = document.getElementById('stop');
const reset = document.getElementById('reset');
let starttime;
let timeoutID;
let elapsedTime = 0;
function countup(){
  const d = new Date(Date.now() - starttime + elapsedTime);
  const m = String(d.getMinutes()).padStart(2,'0');
  const s = String(d.getSeconds()).padStart(2,'0');
  const ms = String(d.getMilliseconds()).padStart(3,'0');
  timer.textContent = `${m}:${s}.${ms}`;

  timeoutID = setTimeout(() =>{
    countup();
  },10);
}

function setButtonStateInitial() {
  start.disabled = false;
  stop.disabled = true;
  reset.disabled = true;
}

function setButtonStateRunning() {
  start.disabled = true;
  stop.disabled = false;
  reset.disabled = true;
}

function setButtonStateStopped() {
  start.disabled = false;
  stop.disabled = true;
  reset.disabled = false;
}

setButtonStateInitial();
start.addEventListener('click', () =>{
setButtonStateRunning();
  starttime = Date.now();
  countup();
  // スタートボタンを何回も押すと、何回も起動してしまって一回のstopでは止まらない
})
stop.addEventListener('click', () =>{
setButtonStateStopped();
 clearTimeout(timeoutID);
 elapsedTime += Date.now() - starttime;
//  ここを+=にしてあげないと前の値を保持することができない。
// startimeはスタート押した時間になるから、毎回押したぶんを足してあげないといけない

// stopを何回も押すと、elaspdtimeが何回を更新されておかしな値になる。
})
reset.addEventListener('click', () =>{
 timer.textContent ='00:00.000'
 elapsedTime = 0;
})


// new Dateはオブジェクトで取得する。
// オブジェクトから数字で取得したい時は、get___.
// gettime使うと、どこに行っても使うことができる、ミリ単位を取得することができる
// Date nowはm秒で1970年からの取得する


// disabledはdivとかに使うことができない。
// if(timer.classList.contains('active') ===ture){
//   return;
// }
// とかをボタン押した時の処理の前に書いてあげるて、retunしてあげる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="timer">00:00.00</div>
  <button id="start">start</button>
  <button id="stop">stop</button>
  <button id="reset">reset</button>
  <script src="main.js"></script>
</body>
</html>

Discussion