Рекурсивный таймер неправильно останавливается

    var label = document.getElementById("exerciseLabel");
    var button = document.getElementById("pauseButton");
    var counter = document.getElementById("exerciseCounter");
    var routine = document.getElementById("info");
    var current = 0;
    var playing = false;
    var countdownTimer = null;
    var workout =
    {
      "title": "Full Body",
      "exercises":
      [
        {
          "name": "Push Ups",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Squats",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Running in place",
          "duration": 3,
          "break": 3
        }
      ]
    };
    
    // LOOPING TIMER FUNCTION
    // Initialise virtual trainer.
    init();
    
    /**
    * Bind loop start to click on button.
    *
    * @return {void}
    */
    function init()
    {
      loop();
      button.addEventListener("click", toggle);
    }
    
    /**
    * Play / Stop exercising.
    *
    * @return {void}
    */
    function toggle()
    {
      if (playing)
      {
        pause();
      }
      else
      {
        loop();
      }
    }
    
    /**
    * Reset timer. <--SHOULD BE PAUSE
    *
    * @return {void}
    */
    function pause()
    {
      playing = false;
      setLabel("Paused");
      //setCounter('--')
      if (countdownTimer)
      {
        clearTimeout(countdownTimer); // FIGURE OUT HOW NOT TO CLEAR
      }
    }
    
    // TIMER FUNCTION
    /**
    * Timer loop function
    *
    * @return {void}
    */
    function loop()
    {
      playing = true;
    
      // Change button label
      setButtonText("Pause");
    
      // Get current exercise
      var exercise = workout.exercises[current];
    
      // If out of the exercises Array bounds, call 'done'
      if (!exercise)
      {
        return done();
      }
      // Otherwise run countdown and update UI.
      countdown(exercise.duration, exercise.name, function ()
      {
        countdown(exercise.break, "Break", function ()
        {
          // Next exercise.
          current++;
          // Re-iterate until finished.
          loop();
        });
      });
    }
    
    /**
    * Exercise session is now over.
    *
    * @return {void}
    */
    function done()
    {
      pause();
      document.getElementById("feedbackScreen").style.display = "block";
    }
    
    /**
    * Recursive timer function.
    *
    * @param  {Number} seconds
    * @param  {String} label
    * @param  {Function} callback
    * @return {void}
    */
    function countdown(seconds, label, callback)
    {
      setLabel(label);
      setCounter(seconds);
    
      // Set timeout to next second
      countdownTimer = setTimeout(function ()
      {
        // Decrease seconds.
        seconds--;
    
        // Check whether the countdown is over - execute callback if so.
        if (seconds <= 0)
        {
          return callback();
        }
    
        // Call itself with a lower number otherwise.
        countdown(seconds, label, callback);
      }, 1000); // (1 sec).
    }
    
    /**
    * Set counter text.
    *
    * @param  {Number} val
    * @return {void}
    */
    function setCounter(val)
    {
      counter.innerHTML = val;
    }
    
    /**
    * Set label text.
    *
    * @param  {String} text
    * @return {void}
    */
    function setLabel(text)
    {
      if (label.textContent === text)
      {
        return;
      }
      label.innerHTML = text;
    }
    
    /**
    * Set button text.
    *
    * @param  {String} text
    * @return {void}
    */
    function setButtonText(label)
    {
      button.innerHTML = label;
    }

    <div id="exerciseLabel"></div>
    <button id="pauseButton"></button>
    <div id="exerciseCounter"></div>
    <div id="info"></div>