javascript - 在文档准备好之前从服务器获取 AJAX 数据(jQuery)

Question

我想从服务器获取一些数据并将其写入 JavaScript 中的全局数组。然后在准备好文档时，我想使用这个数组来创建一些新元素(选项)。我应该拥有包含此数据的全局数组，因为在首次加载后，客户端可以使用此数据修改用户界面。

$(document).ready(function () {
    UseAjaxQueryForFillGlobalArray();
    MakingInterfaceUsingGlobalArray();       
});

但我有奇怪的行为，当我调试页面时，我可以看到方法 MakingInterfaceUsingGlobalArray 首先工作，就在我通过 AJAX 使用方法 UseAjaxQueryForFillGlobalArray 获取数据之后，我没有加载数据的新界面(html 选项)。

如果我这样做:

UseAjaxQueryForFillGlobalArray();
$(document).ready(function () {     
    MakingInterfaceUsingGlobalArray();       
});

然后在 Firefox 中工作正常，但在另一个网络浏览器中第一次加载时不正确(例如通过链接转到此页面)。但是如果我按 F5 刷新，我有正确的用户界面，它通过 AJAX 加载到全局 JS 数组。

如何解决？也许我使用完全不正确的方式？

评论后添加:

这是我的 ajax 函数:

function UseAjaxQueryForFillGlobalArray(){
    var curUserId = '<%= Master.CurrentUserDetails.Id %>';
    var curLocale = '<%= Master.CurrentLocale %>';
    $.ajax({
        type: "POST",
        url: "/segment.aspx/GetArrayForCF",
        data: '{"userId":"' + curUserId + '","curLocale":"' + curLocale + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            //here is I doing parse my string from server and fill arrays.     
        }
    });
}

Answer 1

我认为问题在于您不知道第一个函数返回的确切时间，因为它是异步的。所以你应该只在回调中使用数组

function UseAjaxQueryForFillGlobalArray() {
    // make the call
    $.post(url, data, function() {
        // let's be sure that the dom is ready
        $(document).ready(function () {    
            // use the array
            MakingInterfaceUsingGlobalArray();      
        }
    }
}();// invoke the function