title: Flickering and glitching occuring when setInterval used in loop
body: <pre><code>  function startTimer(duration, activity) {
      function countdown() {
        if ((duration - 1) &gt; 0) {
          duration--;
          $("#timer").html(convertNumbers(duration))
        } else {
          if (activity === "session") {
            startBreak();
          } else {
            startSession();
          }
        }    
      }
  
      setInterval(countdown, 1000) 
  }
  
  function startSession() {
      var time = parseInt(($("#session_time").text()), 10);
      startTimer(time * 60, "session");
      $("#activity").html("Session");
  }
  
  function startBreak() {
      var time = parseInt(($("#break_time").text()), 10);
      startTimer(time * 60, "break");
      $("#activity").html("Break");
  }
  </code></pre>
  
  <p>The start button:</p>
  
  <pre><code>$("#start").click(function() {
    startSession();
  });
  </code></pre>
  
  <p>I am making a Pomodoro clock using setInterval that runs every second to decrement by one second. When the start button is pressed, the startSession() function grabs the time and calls the startTimer() function, which points to setBreak() when the duration is 0.</p>
  
  <p>Ideally it would alternate between startSession and startBreak, but I get flickers and random numbers in the text (time left) set in "#timer" after the initial countdown. This might have something to do with not ending the Interval when startTimer() calls startBreak().</p>