title: How to correct the clearInterval when setInterval given to global variable in javascript?
body: <p>Here is my code</p>
  
  <p><strong>HTML Code</strong> </p>
  
  <p></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
      &lt;li&gt;Four&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The following is piece of <strong>Javascript</strong> code</p>
  
  <pre><code>//The below line is outside of document ready
  var interval;
  
  //The below code is wraped in  document ready
  $("input").live("click", function(){
  
   var length = $('li').length, start = 1;
      alert(length+' : '+start);
      interval = setInterval(function() {
                      if (length &gt; 0 &amp;&amp; start &lt;= length) {
                          alert('IF section');
                          $('li:nth-child('+start+')').
                             removeClass('hidden').addClass('visible');
                          start++;
                      } else {
                          alert('Else section with before clearInterval called');
                          clearInterval(interval);
                          alert('Else section with after clearInterval called');
  
                      }
  }, 3000);
  
  
  });
  </code></pre>
  
  <p>Here <code>ELSE</code> section is called repeately after <code>clearInterval</code> method is executed. One interesting thing is <strong>alert</strong>  before <code>clearInterval</code> statement is repeately  called, while <strong>alert</strong> after <code>clearInterval</code> is not called in <code>setInterval</code> method. You can find an example of this in <a href="http://jsfiddle.net/QZxtL/" rel="nofollow">fiddle</a>. In Fiddle <code>var interval</code> is inside the DomReady. It should be outside of DomReady. I don't know how to put it outside of DomReady in fiddle.</p>
  
  <p>Why this happens?</p>
  
  <p>How to correct this?</p>