Почему не работает таймер?

Question

[Dmytro Yurikov]

Таймер не работает не идет обратный отсче. Не могу понять в чем ошибка, помогите пожалуйста. Заранее спасибо

import './timer.css';
import { useState } from 'react';
 
function Timer() {
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const [endtime, setEndtime] = useState(0);

  const setClock = () => {
    const timerInterval = setInterval(()=>tick(),1000)
    if(endtime<=0){
      clearInterval(timerInterval);
      alert(1)
    }else{
      tick()
    }
  }
  function tick(){
    setEndtime(endtime-1)
    console.log(endtime)
    updateClock()
  }
  function updateClock(){
    const t = (Date.parse(new Date()) + endtime) - Date.parse(new Date());
    setMinutes(getZero(Math.floor((t/1000/60)%60)));
    setSeconds(getZero(Math.floor((t/1000)%60)));
  }
  
  function getZero(num){ // добавляем нули к числу что бы было красиво
    if(num<0){
        return '00';
    }
    if(num >= 0 && num<10){
        return `0${num}`;
    }else{
        return num;
    }
}

  const onPomodoro = () => {
    document.body.classList.add("pomodoro");
    document.body.classList.remove("short");
    document.body.classList.remove("long");
    setEndtime(15000000)    
  }

  const onShortBreak = () => {
    document.body.classList.add("short");
    document.body.classList.remove("pomodoro");
    document.body.classList.remove("long");
  }

  const onLongBreak = () => {
    document.body.classList.add("long");
    document.body.classList.remove("pomodoro");
    document.body.classList.remove("short");
  }
  
  function onPlay(){
    setClock()
  }

  function onPause(){
    setClock()
  }

  return (
    <>
      <section className="timer">
        <div className="container">
            <div className="timer__navigation__btns">
                <button onClick={onPomodoro} className="timer__navigation-btn">Pomodoro</button>
                <button onClick={onShortBreak} className="timer__navigation-btn">Short-break</button>
                <button onClick={onLongBreak} className="timer__navigation-btn">long-break</button>
            </div>
            <div className="timer__blocks">
                <div className="timer__block">
                    <span id="minutes">{minutes}</span>
                </div>
                <div className="timer__dots">
                    :
                </div>
                <div className="timer__block">
                    <span id="seconds">{seconds}</span>
                </div>
            </div>
            <div className="timer__controller">
              <button onClick={onPlay} className="timer__controller-btn"><i className="fa-solid fa-play"></i></button>
              <button onClick={onPause} className="timer__controller-btn"><i className="fa-solid fa-pause"></i></button>
            </div>
        </div>
     </section>
    </>
  );
}

export default Timer;

Answer 1

[BFSold1er]

const [timerInterval , settimerInterval ] = useState();

const setClock = () => {
if(endtime<=0&&timerInterval){
clearInterval(timerInterval);
alert(1)
return
}
const newtimerInterval = setInterval(tick(),1000)
settimerInterval(newtimerInterval)
}
function tick(){
setEndtime(endtime=>endtime-1)
console.log(endtime)
updateClock()
}
function updateClock(){
const t = (Date.parse(new Date()) + endtime) - Date.parse(new Date());
setMinutes(getZero(Math.floor((t/1000/60)%60)));
setSeconds(getZero(Math.floor((t/1000)%60)));
}

function getZero(num){ // добавляем нули к числу что бы было красиво
if(num<0){
return '00';
}
if(num >= 0 && num<10){
return `0${num}`;
}else{
return num;
}
}

const onPomodoro = () => {
document.body.classList.add("pomodoro");
document.body.classList.remove("short");
document.body.classList.remove("long");
setEndtime(15000000)
}

const onShortBreak = () => {
document.body.classList.add("short");
document.body.classList.remove("pomodoro");
document.body.classList.remove("long");
}

const onLongBreak = () => {
document.body.classList.add("long");
document.body.classList.remove("pomodoro");
document.body.classList.remove("short");
}

function onPlay(){
setClock()
}

function onPause(){
stopClock()
}
stopClock(){
if(timerInterval) {
clearInterval(timerInterval);
settimerInterval(0);
return;
}
}