title: why does javascript setTimeout() not work in a loop?
body: <p>Consider the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function timedText()
  {
    var x=document.getElementById('txt');
    var t = new Array();
    t[1] = setTimeout( function(){x.value="2 seconds"}, 2000 );
    t[2] = setTimeout( function(){x.value="4 seconds"}, 4000 );
    t[3] = setTimeout( function(){x.value="6 seconds"}, 6000 );
  }
  function timedTextArr()
  {
    var x=document.getElementById('txt');
    var t = new Array();
    for( var i = 0 ; i &lt; 3 ; i++ ) {
      t[i] = setTimeout( function(){x.value=i*2+" seconds"}, i*2000 );
    }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
  &lt;input type="text" id="txt" /&gt;
  &lt;input type="button" value="Display timed text!" onclick="timedText()" /&gt;
  &lt;input type="button" value="Display timed text Arr!" onclick="timedTextArr()" /&gt;
  &lt;/form&gt;
  &lt;p&gt;Click on the button above. The input field will tell you when two, four, and six seconds have passed.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Function <code>timedText()</code> works, but <code>timedTextArr()</code> doesn't.  Both functions assign return values from <code>setTimeout()</code> to array elements.  But in the <code>for()</code> loop, only the last timer works... and it works three times.</p>
  
  <p>Is this a bug?</p>