title: Using settimeout to queue functions in a delayed manner?
body: <p>Update: I edited the <code>setTimeout()</code> code to run the code inside a function, but now nothing runs at all. I also changed the function to accept <code>drawcount</code>, <code>i</code>, and <code>j</code>, making the call <code>appendcharacter(drawcount, i, j)</code>. It still does nothing at all (although originally it ran, all at the same time). For some reason <code>setTimeout</code> is not running the function properly after the timeout.</p>
  
  <p>--Original Question--</p>
  
  <p>I have the following code (note not all variables are listed, just what was relevant or was with this section of code). I would like to stagger the running of <code>appendcharacter(drawcount)</code> so that it will run in half-second intervals, yet this code runs everything at exactly the same time:</p>
  
  <pre><code>        var $span, $br;
          var $img = $('#image');
  
          $(document).ready(function () {
              var drawcount = 0;
              for (var j = 0; j &lt; imgwidth; j++) {
                  $("#image").append("&lt;br&gt;");
  
                  for (var i = 0; i &lt; imgheight; i++) {
                      var timeout = 500 * drawcount;
                      console.log(timeout);
                      setTimeout(function () {
                          appendcharacter(drawcount, i, j);
                      },timeout);
                      drawcount++;
                  }
              }
  
  
              function appendcharacter(drawcount, i, j) {
                  $span = $("&lt;span id='" + i + "_" + j + "' style='position:relative; display: inline; color: rgba(" + pixels[j][i].red + " , " + pixels[j][i].green + " , " + pixels[j][i].blue + ", 1);'&gt;&lt;/span&gt;").appendTo($img);
                  switch (drawcount % 18) {
                      case 0:
                          $("#" + i + "_" + j).append("/");
                          break;
                      case 2:
                          $("#" + i + "_" + j).append("-");
                          break;
                      case 3:
                          $("#" + i + "_" + j).append("/");
                          break;
                      case 4:
                          $("#" + i + "_" + j).append("-");
                          break;
                      case 5:
                          $("#" + i + "_" + j).append("/");
                          break;
                      case 6:
                          $("#" + i + "_" + j).append("-");
                          break;
                      case 7:
                          $("#" + i + "_" + j).append("(");
                          break;
                      case 8:
                          $("#" + i + "_" + j).append("8");
                          break;
                      case 9:
                          $("#" + i + "_" + j).append("8");
                          break;
                      case 10:
                          $("#" + i + "_" + j).append(")");
                          break;
                      case 11:
                          $("#" + i + "_" + j).append("-");
                          break;
                      case 12:
                          $("#" + i + "_" + j).append("\\");
                          break;
                      case 13:
                          $("#" + i + "_" + j).append("-");
                          break;
                      case 14:
                          $("#" + i + "_" + j).append("\\");
                          break;
                      case 15:
                          $("#" + i + "_" + j).append("-");
                          break;
                      case 16:
                          $("#" + i + "_" + j).append("\\");
                          break;
                      case 17:
                          $("#" + i + "_" + j).append("  ");
                          break;
                  }
              }
  
  
          });
  </code></pre>