title: javascript: using settimeout in a for loop to show text at regular intervals
body: <p>I want to show 3 lines at regular intervals(one second),here's the code:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      function showText()
      {
          var itemlist = document.getElementsByClassName("test");
          function additem(index) {
              setTimeout(function(){itemlist[index].setAttribute("style", "display:block;");}, 1000);
          }
          for(var i=0;i&lt;itemlist.length;++i) {
              additem(i);
          } 
      }
      &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;input type="button" value="show" onClick="showText()"&gt;
          &lt;div class="test" style="display:none"&gt;first&lt;/div&gt;
          &lt;div class="test" style="display:none"&gt;second&lt;/div&gt;
          &lt;div class="test" style="display:none"&gt;third&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>But the result is: when I click the show button,a second later,
  all three div block appear together.I was expecting they will be displayed one by one with an interval of one second.</p>
  
  <p>How can I fix this? Hope for your help.</p>