Как вовремя остановить анимацию

[poorking]

Здравствуйте, уважаемые.

Перейду сразу к делу

setTimeout(function(){
     doSomething();

     /**Условие остановки*/ setTimeout(arguments.callee, 1000);

}, 1000)

Нужно создать бесконечную анимацию, останавливающуюся и запускающуюся по нажатию кнопки. Если делать плавную анимацию, то вполне сойдет обращение какого нибудь флага при клике по кнопке и проверка его в месте условия остановки, но у меня анимация "рывками", и когда я нажимаю подобную кнопку, проходит еще один кадр анимации, так как setTimeout уже ждет времени своего срабатывания, что недопустимо в моем случае.
setInterval/clearInterval подошел бы идеально, если бы не варьирующаяся длина кадра (в примере 1000, но на деле что-то вроде getInterval()). Подскажите пожалуйста, какие есть способы мгновенно остановить анимацию такого типа? Или, возможно ли как-то подобное осуществить через setInterval?

[monolithed]

<script type="text/javascript">
window.onload = function(){
    var i = 0;
    
    document.getElementById('a').onclick = function(){
        if(i>0) {
            i = 0;
            window.clearTimeout(timer);
            return false;
        }
        (function(){
            document.getElementById('span').style.left = ++i<200 ? i+'px' : i = 0;
            timer = window.setTimeout(arguments.callee, 10);
            
        })();
        return false;
    };
}
</script>
    
<style type="text/css">
a {display: block; position: relative;}
    
div {
    border: 1px dotted #DDD;
    position: absolute;
    overflow: hidden;
    top: 50px;
    width: 500px;
    height: 50px;
}  
    
span {
    background: blue;
    position: absolute;
    color: white;
    text-align: center;
    width: 50px;
    height: 50px;
}
</style>

<div>
    <span id="span">Text</span>  
</div>

<a href="#" id="a">click</a>

[poorking]

monolithed,
Спасибо большое! Суть ясна