Javascript setInterval question
<p>I noticed something that I can't quite explain.  I made this javascript code that grows or shrinks a blue box.  The script is here:</p>

<pre><code>var animated = {

  timer : null,

  el : document.getElementById("divNavyBox"),

  startGrowAnimation : function() {

      this.stopAnimation();

      this.timer = setInterval(

          animated.doAnimation(5), 10);

  },

startShrinkAnimation : function() {

    this.stopAnimation();

    this.timer = setInterval(function() {

        animated.doAnimation(-5);

    }, 10);

},

stopAnimation : function() {

    clearInterval(this.timer);

},

doAnimation : function(amount) {

    var size = this.el.offsetWidth;



    if ((amount &gt; 0 &amp;&amp; size &lt; 200) || (amount &lt; 0 &amp;&amp; size &gt; 0)) {

        this.el.style.width = size + amount + "px";

        this.el.style.height = size + amount + "px";

    } else {

        this.stopAnimation();

    }

}

};
</code></pre>

<p>When the startGrowAnimation method of the animated class is called, the box visually grows until it reaches a certain width and height.  It then stops.  The startGrowAnimation code is located below:</p>

<pre><code>startGrowAnimation : function() {
    this.timer = setInterval(function() {
        animated.doAnimation(5);
    }, 10); 
}
</code></pre>

<p>This code WORKS just fine.  However, I don't understand WHY it's necessary to put an anonymous function in the parameter instead of just the normal call function.  So, I replaced the code above with the code below:</p>

<pre><code>startGrowAnimation : function() {

    this.stopAnimation();

    this.timer = setInterval(animated.doAnimation(5), 10);

},
</code></pre>

<p>When I use this code, for some reason, the box only increases in size by five pixels each time the startGrowAnimation method is called.  </p>

<p>So, why is it necessary to include the startGrowAnimation method inside of an anonymous function call in this case?  </p>
