ローカルJavascriptコードはどのように実行されますか？

Question

私は、 "重い"コンピューティングとビジュアル表現を行うローカル（サーバーなし、ajaxなし）のコードを開発しています。私のこれまで以上に成長している問題は、コードの断片が前のコード行が終了する前に絶えず実行されることです！これは私を殺していると私はコールバック、約束を読んで、読んで読んだことがあるが、私はそれが私の文脈に適用されていないように見えると私はJavascriptの実行の流れの周りに頭をラップすることはできません。

私はこれのように私のhtmlファイルの先頭にロードされた.jsファイルの中から3つの機能を呼び出す場合：今

FirstFunction(lenghtOfDataset); // creates a complex array of arrays of objects (about 10,000 elements) 
SecondFunction (Dataset); // renders a D3.js svg visualization based on the dataset (about 1,000 elements) 
ThirdFunction (Dataset); // creates an html table by using jQuery .append (bad, I know) using the same dataset (around 10,000 elements) 

、なぜ、オハイオ州なぜ第三関数のコードは、前に実行されません最初の関数は実行を終了しましたか？

$("#my-table").append("<thead><tr>"); 
for (i=FirstNumber; i<=LastNumber; i++) { // about 1000 elements 
    $("#my-table").append("<th>" + i + "</th>"); 
    } 
$("#my-table").append("</tr></thead>"); 

ここでも、なぜ、オハイオ州なぜ閉鎖は「</tr></thead>」前を挿入しますん：（もちろん、「未定義」エラーになる）私が狂わせる

別の例は、このように書きますforループも終了しましたか？

EDIT：OKこの例は、ソリューションを提供するmplungjanのおかげで、無効なコードですが、これは主な問題ではありません。次に、このコードを検討してください。

$("#working-overlay").css("display", "block"); 
for (var i = 1; i <= 10000; i++) {    
     Number[i] = {}; 
     Number[i].value = i; 
     Number[i].divisors = DivisorsOf(i); // I have a function that calculates divisors 
     Number[i].factors = FactorsOf(i); //// I have a function that calculates factors 
} 
$("#working-overlay").css("display", "none"); 

作業オーバーレイには、計算が完了する前に表示：なしが表示されます。そのように行動しないようにするにはどうすればいいですか？私は実際にオーバーレイを気にしませんが、それは一例ですが、次のコード行が実行されたときにforループが実際に終了していないため、次の計算が未定義の値を参照することに注意します。

---

私は（とにかく、一貫性なく動作します）ではないはsetTimeoutをスタイルでのコピー＆ペーストのソリューションや回避策を探しているんだけど、私はそれがそうのように振る舞う理由を理解したいことに注意してください：なぜJavascriptコードの実行は、奇妙なことに、それ自体の前に流れますか？私達は私達のコメントで述べたように

Answer 1

あなたの最初の例では、

あなたの第二の例は、無効である可能性の高い非同期処理のjs D3.jsの問題です。あなたは

は、ここで部分的にHTMLを挿入するためにAPPENDを使用することはできません有効な方法です：

var $tHead = $("#myHead"), 
 
    $headerRow = $("<tr/>"); 
 
for (var i = 0; i <= 1000; i++) { // about 1000 elements 
 
    $headerRow.append("<th>" + i + "</th>"); 
 
} 
 
$tHead.append($headerRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table id="my-table"> 
 
    <thead id="myHead"></thead> 
 
</table>

多分より高速な方法

var $tHead = $("#myHead"), 
 
    headerRow = "<tr>"; 
 
for (var i = 0; i <= 1000; i++) { // about 1000 elements 
 
    headerRow+="<th>" + i + "</th>"; 
 
} 
 
headerRow+="</tr>"; 
 
$tHead.append(headerRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table id="my-table"> 
 
    <thead id="myHead"></thead> 
 
</table>