title: ClearInterval() does not work immediately
body: <p>I have a Carousel which uses the <code>setInterval()</code> to toggle between the tabs every 4 seconds. 
  I now want to stop this auto-toggle on click of any particular tab. </p>
  
  <p><a href="http://jsfiddle.net/qjmDU/10/" rel="nofollow">http://jsfiddle.net/qjmDU/10/</a> is the JS fiddle where I have my html and jquery.
  I am guessing that the problem is the following code being used in the wrong place. Please advise the corrections that you see fit. Thanks.</p>
  
  <pre><code>$(this).on("click", function (event) {
     console.log("After clear interval" + stopVar);
     clearInterval(stopVar);    
  });
  </code></pre>