Why does variable in setTimeout callback not have expected value?
<pre><code>&lt;div id="image_cont"&gt;
  &lt;img src="images/pic1.jpg" alt="pic1" /&gt;
  &lt;img src="images/pic2.jpg" alt="pic2" /&gt;
  &lt;img src="images/pic3.jpg" alt="pic3" /&gt;
&lt;/div&gt;

$(document).ready(function() {
    slide(3, "image_cont", 5000, 600);
});

function slide(numberOfImages, containerId, timeDelay, pixels) {
    //start on first image
    var i = 0;
    var style = document.getElementById(containerId).style;
    window.setInterval(function() {
        if (i &gt;= numberOfImages){
            i = 0;
        }
        var marginLeft = (-600 * i);
        var pixelMovement = pixels/15;


////////////////////////////////////////LOOK HERE//////////////////////////////


        for (var j = 0; j * pixelMovement &lt; 600; j++){
            window.setTimeout(function(){
//alert('marginLeft: ' + marginLeft + ' j: ' + j + ' pixelMovement: ' + pixelMovement);
//this alert shows j is 15 when it should be 0, what's going on?


/////////////////////////////////////////END//////////////////////////////////
                style.marginLeft = (marginLeft - j * pixelMovement) + "px";
                }, 150);
        }
        i++;
    }, timeDelay);
}
</code></pre>
