Having an issue with my pomodoro timer

Hi everyone

Let start by apologizing to your eyes, I plan on redoing a lot of this code more organized and better when i’m done.

I seem to be having an issue when the play/pause button is clicked repeatedly or a couple times quickly, it causes the countdown timer to count in chunks of seconds instead of every 1 sec like it should.

I’m confident the problem is some sort of issue with the “countdownStartStop()” function of the “Timer” component. More specifically I believe it is some sort of issue with the “runningClock” setInterval or that same interval not being cleared properly some times.

Am I missing a condition where “clearInterval(this.runningClock)” needs to trigger?
Do I need to setTimeout onthe actual clicks of the play/pause button to avoid triggering the setInterval again before the 1 sec is up?

quick look inside the component:

playPauseToggle(){
    
 let display = document.getElementById("status-container");
    
    if(this.state.playPause === "fa-solid fa-play"){
     
      display.style.setProperty("font-size","1rem");
      
      this.setState({
        playPause: "fa-solid fa-pause",
        startStopBtn: "pause",
        running: true,
        timerStatus: quotes[ Math.floor(Math.random()*quotes.length)]
       
      })
      
     this.countdownStartStop();
    }else {
      
      this.setState({
         playPause: "fa-solid fa-play",
        startStopBtn: "play",
        running: false,
        timerStatus: "Click Play to Begin"
      })
  display.style.setProperty("font-size","2rem");
    this.countdownStartStop();
   
    }
    
  
  }
  
  
  
  countdownStartStop() {
    
    if(this.state.breakTime === true){
     
    let breakMin = this.state.breakLength.toString();
      
      if(breakMin.length <= 1){
        this.setState({
          countdown: "0"+breakMin+":"+"00"
        })
      }else{
        this.setState({
          countdown: breakMin+":"+"00"
        })
      }
      
    }
  
    let minutes = this.state.countdown.slice(0,2);
    let seconds = this.state.countdown.slice(3,5); 
    let workTime = this.state.sessionLength.toString();
    

   
    
   workTime = workTime.length <= 1 ? "0"+workTime+":"+"00" : workTime+":"+"00";
   
    
  
    
  this.runningClock = setInterval(()=>{
    
    if(this.state.running === false ){
      clearInterval(this.runningClock);
      
      return;
    }
    
   
    if(this.state.running === true && this.state.countdown === "00:00"){
     let sound = document.getElementById('beep');
      sound.play();
      
      if(this.state.breakTime === true){
        this.setState({
          breakTime: false,
          countdown: workTime,
          timerStatus: quotes[ Math.floor(Math.random()*quotes.length)]
        })
        let display = document.getElementById("status-container");
        display.style.setProperty("font-size","1rem");
        clearInterval(this.runningClock);
        window.alert("Time To Focus");
        this.countdownStartStop();
      }else{
      clearInterval(this.runningClock);
     this.checkForBreak();
      }
      return;
      
    }
    
    
   
    
    
      if(seconds === "00"){
        seconds = "59";
        minutes = (parseInt(minutes)-1).toString();
        if(minutes.length === 1){minutes = "0"+minutes}
        this.setState({
          countdown: minutes+":"+seconds
        })
        
      }else{
        seconds = (parseInt(seconds)-1).toString();
        
        if(minutes.length === 1){minutes = "0"+minutes}
        if(seconds.length === 1){seconds = "0"+seconds}
        
        this.setState({
          countdown: minutes+":"+seconds
        })
      }
    
    
    },1000)
    
   
  }
  

  checkForBreak(){
    
   
   if (window.confirm(
   `    Times Up!!!
    Click OKAY to start your break
    -OR-
    Click Cancel for a few more minutes of work`)) {
     
      let display = document.getElementById("status-container");
     
     
    this.setState({
      breakTime: true,
      timerStatus: "RELAX"
    })
     display.style.setProperty("font-size","2rem");
     this.countdownStartStop();
   }else{
     this.setState({
       countdown: "02:00"
     })
     this.countdownStartStop();
   }
  
  
    
  }

or link to the code pen

Pomodoro Timer (codepen.io)