title: How to do Threading in Javascript
body: <p>So I have a large JSON object i'm returning from the server, then building a datatable from it and displaying it on the form. This usually takes a few seconds.. so I was thinking of a loading bar. 
  I have the logic behind the loading bar, however the loop that builds the hmtl data is locking down the browser and I cannot call out to the element i need to update. </p>
  
  <p>Here is my function to do this:</p>
  
  <pre><code>function buildDataTable(db_table, container_id) {
      var $pb = $("&lt;div id=\"progress-bar\"&gt;&lt;/div&gt;");
      $(container_id).html($pb);
      $pb.progressbar({
          value: 0
      });
      $.post("post location", {
          view: "all"
      }, function (data) {
          var headers = "";
          var contents = "";
          var jsonObject = $.parseJSON(data);
          var tik = Math.round(jsonObject.length / 100);
      for (key in jsonObject[0]) {
              headers += "&lt;th&gt;" + key.replace(" ", "&amp;nbsp;") + "&lt;/th&gt;";
          }
          for (i in jsonObject) {
              contents += "&lt;tr&gt;";
              for (j in jsonObject[i]) {
                  contents += "&lt;td class=\"border-right\"&gt;" + jsonObject[i][j] + "&lt;/td&gt;";
              }
              contents += "&lt;/tr&gt;";
              if(Math.round(i/tik) == i/tik) {
  /* if I run the alert (between popups) i can see the progressbar update, otherwise I see no update, the progressbar appears empty then the $(container_id) element is updated with the table i've generated */
                  alert(''); 
                  $pb.progressbar("value",i/tik);
              }
          }
          var html = "&lt;table cellpadding=\"5\" cellspacing=\"0\"&gt;&lt;thead&gt;&lt;tr&gt;" + headers + "&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;" + contents + "&lt;/tbody&gt;&lt;/table&gt;";
  
          $(container_id).html(html);
          $(container_id).children("table:first").dataTable({
              "bJQueryUI": true,
              "sScrollX": "100%"
          });
      });
  }
  </code></pre>