Stuck with a simple slider
<p>OK, I came up with this code</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        var im1 = $("#slider li.first");
        function rev(){ 
            console.log('riv 1 is running now');
            im1.delay(500).animate({marginTop: "-170px"})
               .delay(500).animate({marginTop: "-340px"})
               .delay(500).animate({marginTop: "-510px"})
               .delay(500).animate({marginTop: "0px"}).trigger('stop');
        }

        im1.bind('stop',function(){
            console.log("rev is called on stop")
            rev();
        });

        console.log("rev is called the first time");
        rev();      
    });
&lt;/script&gt;
</code></pre>

<p>What I want to do with this is when the document is ready, I call a function named rev(). What this function does is start an animation which slides 4 images on the slider. And when the animation is finished, I trigger an event called stop.
On the other side, I've defined an event handler which tracks the stop event and runs the function rev() again.</p>

<p>The problem with this is that when the page is load, these functions runs thousands of time before starting the animation and when the limit for callback functions is exceeded (approx after running the function 1709 times), it shows the error on console
"Uncaught RangeError: Maximum call stack size exceeded"</p>

<p>Is there any better way to do this?</p>
