由异步.get jQuery函数引起的表布局错误

Question

我正试图从数据库中为每个单元格填充一个带有不同信息的时间表。该表由以下功能刷新：

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并关闭异步，因为它大大增加了加载页面的时间，但目前我还没有找到解决办法。

提前谢谢。

Answer 1

因为您正在进行异步调用，所以需要一种机制将数据返回到它所属的DOM中(而不仅仅是连接它)。因此，您需要将k和l传递到get命令中。您可以使用内置的k和i插入占位符，例如

"< td id='my_td" + k + "_" + l + "'>"。

当ajax返回时，您可以将数据放在它所属的DOM中。