title: setTimeout and animation inside an earlier function
body: <p>To get rid of animation buildup caused by <code>setTimeout</code> (or <code>setInterval</code> either) during tab(window) inactivity (loose of focus) I had to use the <em>recursive callback</em> like:  </p>
  
  <pre><code>function auto() {
  interval = setTimeout(function() {      
      $('#slider').animate({left: '-=500'}, 800, function(){
            auto();         // THE RECURSIVE CALLBACK
      });
  }, 2000);
  }
  auto();
  </code></pre>
  
  <p>Now I'd like <strong>NOT</strong> to reuse the <code>#slider</code>'s <strong>animation</strong> itself cause I've already defined it in an earlier <code>function animate()</code> (without changing the <code>function animate</code> cause I have to use it in other places like-it-is):</p>
  
  <pre><code>function animate(){
      $('#slider').animate({left: '-=500'}, 800);
  }
  </code></pre>
  
  <p><strong>How to get work something like this</strong> :</p>
  
  <pre><code>function auto() {
  interval = setTimeout(function() {  
  
        animation();auto();  // THIS IS WRONG AS NOT a RECURSIVE CALLBACK - and creates animation buildup     
  
  }, 2000);
  }
  auto();
  </code></pre>
  
  <p>Thanks a lot in advance!</p>