Javascript object to execute delayed loops
<p>I want to have multiple numbers on my web page "spin up" as the page loads, giving an impression like a fruit machine.</p>

<p>This involves a simple function with a delayed loop.  The way to do this seems to be to <a href="http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop">use setTimeout recursively</a>.  This works fine for just one number on the page.</p>

<p>However for multiple numbers spinning at the same time, each needs its own spinner object.  I used prototypes like this:  </p>

<pre><code>var Spinner = function(id){
    this.element = $('#' + id);
    this.target_value = this.element.text()
    this.initial_value = this.target_value - 30;
};

Spinner.prototype.spinUp = function() {

    loop(this.element); 

    function loop(element) {
        element.html(this.initial_value += 1);
        if (this.initial_value == this.target_value) {
                return;
            };
        clr = setTimeout(loop(element), 30);  // 30 millisecond delay
    };
};

var Spinner1 = new Spinner('number')

Spinner1.spinUp();
</code></pre>

<p>However putting a recursive function inside the prototype method causes a big crash.  Can you see a way around this?</p>

<p>Many thanks!</p>

<p>Derek.</p>
