NextJSでカウントダウンタイマーを作る

NextJSでカウントダウンタイマーを作る方法

私とあるサイトをNextJSで作っていまして、、、その際にカウントダウンタイマーを作る必要があったのでそのプログラムを載せておきたいと思います。

機能としましては指定の時間をカウントダウンできて、時間が終了した後に指定の処理を行える様になっています。

早速プログラム

以下をuseEffectの使える箇所に挿入してください。

多分それで使えるかな？

2行目の30のところはタイマーの時間ですのでこの場合は30分です。

timerFlagをuseStateで用意しておいてTrueになったら開始されます。

const calculateTimeLeft = () => {
  let difference = + 30 - +new Date();
  if (difference > 0) {
    timeLeft = {
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60)
    };
  }
  return timeLeft;
}  
useEffect(() => {
    if (timerFlag) {
      if (!(timeLeft["minutes"] <= 0 && timeLeft["seconds"] <= 0)) {
        const forUnmount = setTimeout(() => {
          setTimeLeft(calculateTimeLeft());
        }, 1000);
        // Clear timeout if the component is unmounted
        return () => clearTimeout(forUnmount);
      } else {
        setTimeout(() => {
          // console.log("終わり！何かの処理")
        }, 1000)
      }
    }
    setViewSize();
  });

結構

雑になっちゃいましたがこんな感じです。

分からないことがあれば聞いてください。

多分動くはずだけど。変数の説明とか足りてなければ、、、頑張って！（投げやり）