Question

如何在文档就绪函数之前运行一些javascript？

我首先完成了以下代码段...

var applicantlist = [];
$.getJSON("apps.json", function(appsdata) {
    for (var i = 0; i<appsdata.applications.length; i++){
        var tempapp = [appsdata.applications[i].name, appsdata.applications[i].server];
        applicantlist.push(tempapp);
    }
});

我已对此进行了测试，数据被推入阵列就好了。问题是我需要这个数组来做一些在我的页面就绪函数中找到的ajax调用，如下所示......

$(document).ready(function(){
    window.jsonpCallbacks = {};
    alert(applicantlist.length);
    for (var i = 0; i < applicantlist.length; i++){
        (function(index){
            window.jsonpCallbacks["myCallback" + index] = function(data){
                myCallback(data,index);
            };
        })(i);
        //Jquery/Ajax call to the WoW API for the data.
        $.ajax({
            "url":"http://us.battle.net/api/wow/character/" + applicantlist[i][1] + "/" + applicantlist[i][0] + "?jsonp=jsonpCallbacks.myCallback" + i,
            "type":"GET",
            "data": { fields: "items, talents, progression, professions, audit, guild, stats"},
            "dataType":"jsonp",
            "contentType":"application/json",
            "jsonpCallback":"jsonpCallbacks.myCallback"+i,
            "success":function(data1){
            }
        })

    }

所有这一切都在第一次狙击之前开火，无论我在哪里放置它。因此，数组为空（警报消息只显示＆＃34; 0＆＃34;）。

正如您在我的ajax调用的URL中所看到的，我需要预先填充该数组。我已经尝试将第一个代码段放在一个单独的.js文件中，并在实际HTML页面上的所有其他javascript文件之前调用它...

我错过了什么？

Answer 1

将发送第一个请求的代码移动到document.ready。在文档准备好之前，您通常不希望发生任何事情。然后在填充数组后将发送下一个请求的代码移动到第一个请求的回调中，并执行您需要先执行的任何其他操作

$(document).ready(function () {
    $.getJSON("apps.json", function(appsdata) {
        ...
        // add items to your array
        sendNextRequest();
    }
});

function sendNextRequest() {
    //Jquery/Ajax call to the WoW API for the data.
    ...
}

这保证在第一个$ .getJSON调用完成并填充数组之前，对WoW api的调用不会被触发。

仅供参考，这是javascript中的常见挑战。您需要一个操作才能在另一个操作完成后运行。使用ajax时，您可以使用上面示例中的回调来帮助您实现此目的。在ajax请求之外，您可以使用jQuery Promises将任务推迟到完成其他任务之后。

需要填充Javascript数组BEFORE（document）.ready（）

1 个答案: