title: How to clearInterval in a if else statement?
body: <p>I'm trying to make little Countdown Timer. When the user click the button, the timer begin and set <code>isTiming</code> to true, then when the user click the button again, the timer stops and set <code>isTiming</code> to false. The problem is that the <code>timeInterval</code> was not cleared when I click the button to stop the Timer. I logged the <code>timeInterval</code> and found it to be <code>undefined</code>. Where did I go wrong?</p>
  
  <pre><code>$("#time-count").click(function() {
    if (!isTiming) {
      isTiming = true;
  
      $( "#minus" ).fadeOut();
      $( "#plus" ).fadeOut();
      $( "div#inner" ).css("animation", "loader" + " " + String(60 * Number($("#time-count").text())) + "s ease-out");
      $(this).text($(this).text() + ":" + "00")
  
      //set the timeInterval
      var timeInterval = setInterval(function() {
        var t = formatTimeRemaining($("#time-count").text());  
  
        if (t.sec.length === 1) {
          $("#time-count").text(t.min + ":" + "0" + t.sec);
        }else {
          $("#time-count").text(t.min + ":" + t.sec);
        }
        if (t.total &lt;= 0) {
            clearInterval(timeInterval);
        }
      }, 1000)
  
    }else {
      isTiming = false;
  
      //Try to clearInterval here but fail
      clearInterval(timeInterval);
      $("#time-count").text("20");
      $( "#minus" ).fadeIn();
      $( "#plus" ).fadeIn();
    }
  });
  </code></pre>
  
  <p>You can have a look at my <a href="http://codepen.io/luiyezheng/pen/LZPvmJ" rel="nofollow">code</a> on CodePen</p>