Prevent interval being queued on multiple clicks
<p>I have created simple script with setInterval function and it is working fine on <b>first</b> button click, but if I click my button couple of times my interval is <b>queued up</b>! I have tried to solve this using <b>one</b> function with Jquery but then I cannot set my Intereval again. <br/>Is there a way to prevent this? Thank you!!
<br/><a href="http://jsfiddle.net/K7pEG/" rel="nofollow">Fiddle example</a>
<br/>My code:</p>

<pre><code> var changeClass=function(){

   if($('ul li.active').length==0){
   $('ul li:first').addClass('active');
   }
    else if($('.active').next().length==0){
       $('.active').removeClass('active');
       $('ul li:first').addClass('active');
    }
      else{
      $('.active').removeClass('active').next('li').addClass('active')
      }

 } 

$(document).ready(function() {
 var intervalID;
    $(".button").click(function(){
    intervalID=setInterval(changeClass,1000);
    });

      $(".clear").click(function(){
      clearInterval(intervalID);
      });

});
</code></pre>
