title: jquery .each waiting for function to finish before continuing through loop
body: <p>I'm essentially trying to loop through a collection of LI tags and insert some text to simulate the look of someone writing a list of things to do.  It works, but it writes each of the list items simultaneously instead of waiting.  Is there an easy way to achieve this?  I have a JS fiddle setup here: <a href="http://jsfiddle.net/fZpzT/">http://jsfiddle.net/fZpzT/</a> but the code looks like this.  Thanks.</p>
  
  <pre><code>function addListItems() {
  var str = {
      listitem1:'personal background check',
      listitem2:'look into my sketchy neighbor',
      listitem3:'look up my driving record',
      listitem4:'pick up milk',
      listitem5:'wash the car'
  }
  
  $('.list-container li').each(function(){
      var z = $(this).attr('id');
      var str2 = str[z];
      var delay = 0;
      for (var i = 0; i &lt;= str2.length; i++) {
          (function(str2){
              delay += 100 + Math.floor(Math.random()*11)*6;
              setTimeout(function(){
                  appendStr(str2);       
              },delay);
          })(str2[i])
      }
      function appendStr(str2) {
        $('#'+ z).append(str2);
      }
  });
  }
  </code></pre>