Javascriptでスレッディングする方法

Question

私は大きなJSONオブジェクトを持っています。サーバーから戻ってきて、データテーブルを構築してフォームに表示しています。これには通常数秒かかります。ローディングバーを考えていました。 ローディングバーの後ろにロジックがありますが、hmtlデータを作成するループはブラウザをロックしているため、更新が必要な要素を呼び出すことはできません。ここで

はこれを行うに私の関数である。

function buildDataTable(db_table, container_id) { 
    var $pb = $("<div id=\"progress-bar\"></div>"); 
    $(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 += "<th>" + key.replace(" ", "&nbsp;") + "</th>"; 
     } 
     for (i in jsonObject) { 
      contents += "<tr>"; 
      for (j in jsonObject[i]) { 
       contents += "<td class=\"border-right\">" + jsonObject[i][j] + "</td>"; 
      } 
      contents += "</tr>"; 
      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 = "<table cellpadding=\"5\" cellspacing=\"0\"><thead><tr>" + headers + "</tr></thead><tbody>" + contents + "</tbody></table>"; 

     $(container_id).html(html); 
     $(container_id).children("table:first").dataTable({ 
      "bJQueryUI": true, 
      "sScrollX": "100%" 
     }); 
    }); 
} 

Answer 1

を[答えとして私のコメントを追加しました]

JavaScriptがシングルスレッドです。あなたの作品を分割し、順番に "setTimeout"を使用して処理中（GUI間での処理中）にGUIを更新できるようにする必要がありますが、それでもブラウザはやはり反応しないようです。

Answer 2

あなたはWebWorkerを使用して試すことができます：https://developer.mozilla.org/en/DOM/Worker
したがって、ワーカーは、メインスレッドの並列に実行されている、あなたは正確に労働者を使用してマルチスレッドを達成することはできません：あなたは労働者からのUIを変更することはできません。
作業者のグリッドを文字列として作成し、作業者が終了したら、必要な場所にグリッドを追加することができます。

Answer 3

setTimeoutでデータベースのすべてのビルドを行う場合、残りのページは応答可能である必要があります。

この関数でhtml要素を構築することができます.HTML要素を準備するには、その要素をDOMに接続します。また、プログレスバーの表示を更新するために、関数を呼び出すか、イベントを送信する必要があります。コメントの後

編集：

これは、バックグラウンドで実行され、ページの応答性には影響しません。

window.setTimeout(function() {buildDataTable(db_table, container_id)}, 0);

あなたはすでにあなたの関数からあなたのプログレスバーを更新するので、これがすべきそれをやる。

ただし、プログレスバーを更新するコードからデータテーブルを生成するコードを切り離したい場合があります。

Answer 4

私のアプリケーションでこれを行う唯一のきれいな方法は、サーバー上でjsonを処理し、そこにhtmlを構築することです。 $.post()

を介してブラウザにHTMLを返します。進行状況バーが失われます。しかし、私は無限のロードGIFを使用することができます...