本地Javascript代码在执行过程中是如何流动的

我正在开发一段本地(没有服务器，没有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)

现在，为什么，为什么第三个函数中的代码在第一个函数完成执行之前就执行了呢?(当然，会导致"undefined"错误)

另一个让我抓狂的例子是这样的:

$("#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:好吧，这个例子有无效的代码，感谢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");

在计算完成之前，工作叠加将显示为display:none。怎样才能不那么做呢?我不关心这里的覆盖，这只是一个例子，但我关心的是下一行的计算将引用一个未定义的值，因为当执行下一行代码时，for循环并没有真正结束。

---

请注意，我不是寻找一个复制粘贴的解决方案，也不是setTimeout风格的解决方案(工作不一致，无论如何)，但我想了解为什么它的行为是这样的:为什么Javascript代码执行流，奇怪的是，在自己之前?

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>