由于异步 .get jQuery 函数导致的表布局错误

我正在尝试用数据库中每个单元格的不同信息填充时间表。表正在通过以下函数刷新：

function refreshTable() {
    //Form values
    var park = $('#Park').val();
    var building = $('#Building').val();
    var room = $('#Room').val().split(' ')[0];
    //var room = temp[0];
    var semester = $('#Semester').val();
    var week = $('#Week').val();

    //Days and times arrays
    var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
    var times = ["9:00-9:50", "10:00-10:50", "11:00-11:50", "12:00-12:50", "13:00-13:50", "14:00-14:50", "15:00-15:50",
                    "16:00-16:50", "17:00-17:50"];
    var periods = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    //Initializing tableHTML variable
    var tableHTML = "<table><tr><th><p style='text-align: center'>-</p></th>";
    //Appending first row
    for (var i = 0; i < 9; i++) {
        tableHTML += "<th>" + times[i] + "</th>";
    }
    tableHTML += "</tr>";

    //Nested for loop to append timetable slots to tableHTML
    var period, day, result;
    for (var k = 0; k < 5; k++) {
        tableHTML += "<tr><th>" + days[k] + "</th>";
        day = days[k];
        for (var l = 0; l < 9; l++) {
            period = periods[l];
            $.get('@Url.Action("getAvailability")', { parkName: park, buildingName: building, roomCode: room,
                semester: semester, week: week, day: day, period: period
            }, function (data) {
                tableHTML += "<td>"+data+"</td>";
            });
        }
        tableHTML += "</tr>"
    }
    //Finish tableHTML and set #tableDIV to contain it.
    tableHTML += "</table>";
    $('#tableDiv').html(tableHTML);
}

但是，由于 jQuery get 函数异步调用它，因此只有 .get 之外的单元格才会写入 tableHTML 变量。

我能做些什么来防止这种情况发生？我不想使用 ajax 并关闭异步，因为它大大增加了加载页面的时间，但目前我看不到解决方法。

提前谢谢。