setTimeout and animation inside an earlier function

To get rid of animation buildup caused by setTimeout (or setInterval either) during tab(window) inactivity (loose of focus) I had to use the recursive callba开发者_如何学Cck like:

function auto() {
interval = setTimeout(function() {      
    $('#slider').animate({left: '-=500'}, 800, function(){
          auto();         // THE RECURSIVE CALLBACK
    });
}, 2000);
}
auto();

Now I'd like NOT to reuse the #slider's animation itself cause I've already defined it in an earlier function animate() (without changing the function animate cause I have to use it in other places like-it-is):

function animate(){
    $('#slider').animate({left: '-=500'}, 800);
}

How to get work something like this :

function auto() {
interval = setTimeout(function() {  

      animation();auto();  // THIS IS WRONG AS NOT a RECURSIVE CALLBACK - and creates animation buildup     

}, 2000);
}
auto();

Thanks a lot in advance!

Make animate accept a calback:

function animate(cb){
    $('#slider').animate({left: '-=500'}, 800, cb);
}

//...

interval = setTimeout(function() {  
    animation(function(){
        auto();
    });   
}, 2000);