title: Looping setTimeout
body: <p>I'm currently trying to wrap my head around some JavaScript.</p>
  
  <p>What I want is a text to be printed on the screen followed by a count to a given number, like so:</p>
  
  <blockquote>
    <p>"Test"</p>
    
    <p>[1 sec. pause]</p>
    
    <p>"1"</p>
    
    <p>[1 sec. pause]</p>
    
    <p>"2"</p>
    
    <p>[1 sec. pause]</p>
    
    <p>"3"</p>
  </blockquote>
  
  <p>This is my JS:</p>
  
  <pre><code>$(document).ready(function() {
  
      var initMessage = "Test";
      var numberCount = 4;    
  
  function count(){
  
      writeNumber = $("#target");
  
      setTimeout(function(){
          writeNumber.html(initMessage);
      },1000);
  
          for (var i=1; i &lt; numberCount; i++) {
  
      setTimeout(function(){
          writeNumber.html(i.toString());
      },1000+1000*i)};
  
  };
  
   count();
  
  });
  </code></pre>
  
  <p>This is my markup:</p>
  
  <pre><code>&lt;span id="target"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>When I render the page, all I get is "Test" followed by "4".</p>
  
  <p>I'm no JavaScript genius, so the solution could be fairly easy. Any hints on what is wrong is highly appreciated.</p>
  
  <p>You can play around with my example here: <a href="http://jsfiddle.net/JSe3H/1/">http://jsfiddle.net/JSe3H/1/</a></p>