title: clearTimeout on multiple setTimeout
body: <p>I have multiple setTimeout functions like this:</p>
  
  <pre><code>    function bigtomedium(visiblespan) {
          visiblespan.removeClass('big').addClass('medium'); 
          setTimeout(function(){ mediumtosmall(visiblespan);},150);
      };
  
      function mediumtosmall(visiblespan) {
          visiblespan.removeClass('medium').addClass('small');
          setTimeout(function() { smalltomedium(visiblespan); },150);
      };
  
      function smalltomedium(visiblespan) {
          visiblespan.removeClass('small').addClass('medium');
          setTimeout(function() { mediumtobig(visiblespan); },150);
      };
  
      function mediumtobig(visiblespan) {
          visiblespan.removeClass('medium').addClass('big');
          setTimeout(function() { bigtomedium(visiblespan); },150);
      };
  </code></pre>
  
  <p>Which is activated in jquery onclick:</p>
  
  <pre><code>    $('div.click').click(
          function(event) {
              var visiblespan = $('span:visible');
              mediumtosmall(visiblespan);
          }
      );
  </code></pre>
  
  <p>What I need to do, is to get the click to hide invisible span as well.</p>
  
  <pre><code>    $('div.click').click(
          function(event) {
              var visiblespan = $('span:visible');
                              var invisiblespan = $('span:not(:visible)');
              mediumtosmall(visiblespan);
              clearTimeout(invisiblespan);
          }
      );
  </code></pre>
  
  <p>What I'm not sure how to do is to write the clearTimeout function that will stop the loop. Any help is greatly appreciated. Thanks.</p>