javascript代码的异步执行

时间:2012-06-28 06:47:27

标签: javascript ajax asynchronous time-complexity

我正在研究javascript和json,但我遇到了一些问题:我有一个与json一起工作的脚本,但我写的内容并不是那么好。代码只有在我使用firebug或其他工具逐步进行调试时才能工作,这让我觉得代码的执行(或者它的一部分......就像你看到的那样创建表)需要太多时间,以便浏览器停止它。

代码是:

var arrayCarte = [];
var arrayEntita = [];
var arraycardbyuser = [];

function displayArrayCards() {
var richiestaEntity = new XMLHttpRequest();

richiestaEntity.onreadystatechange = function() {
    if(richiestaEntity.readyState == 4) {
        var objectentityjson = {};
        objectentityjson = JSON.parse(richiestaEntity.responseText);

        arrayEntita = objectentityjson.cards;
    }
}
richiestaEntity.open("GET", "danielericerca.json", true);
richiestaEntity.send(null);

for(i = 0; i < arrayEntita.length; i++) {

    var vanityurla = arrayEntita[i].vanity_urls[0] + ".json";
    var urlrichiesta = "http://m.airpim.com/public/vurl/";

    var richiestaCards = new XMLHttpRequest();
    richiestaCards.onreadystatechange = function() {
        if(richiestaCards.readyState == 4) {
            var objectcardjson = {};
            objectcardjson = JSON.parse(richiestaCards.responseText);


            for(j = 0; j < objectcardjson.cards.length; j++)
            arrayCarte[j] = objectcardjson.cards[j].__guid__; //vettore che contiene i guid delle card

            arraycardbyuser[i] = arrayCarte;

            arrayCarte = [];
        }
    }
    richiestaCards.open("GET", vanityurla, true);
    richiestaCards.send(null);
}





var wrapper = document.getElementById('contenitoro');

wrapper.innerHTML = "";

var userTable = document.createElement('table');

for(u = 0; u < arrayEntita.length; u++) {
    var userTr = document.createElement('tr');

    var userTdcard = document.createElement('td');
    var userTdinfo = document.createElement('td');

    var br = document.createElement('br');

    for(c = 0; c < arraycardbyuser[u].length; c++) {
        var cardImg = document.createElement('img');
        cardImg.src = "http://www.airpim.com/png/public/card/" + arraycardbyuser[u][c] + "?width=292";
        cardImg.id = "immaginecard";
        userTdcard.appendChild(br);
        userTdcard.appendChild(cardImg);

    }

    var userdivNome = document.createElement('div');
    userdivNome.id = "diverso";
    userTdinfo.appendChild(userdivNome);

    var userdivVanity = document.createElement('div');
    userdivVanity.id = "diverso";
    userTdinfo.appendChild(userdivVanity);

    var nome = "Nome: ";
    var vanityurl = "Vanity Url: ";
    userdivNome.innerHTML = nome + arrayEntita[u].__title__;
    userdivVanity.innerHTML = vanityurl + arrayEntita[u].vanity_urls[0];

    userTr.appendChild(userTdcard);
    userTr.appendChild(userTdinfo);
    userTable.appendChild(userTr);
}

wrapper.appendChild(userTable);
}

问题是应该使表的代码不等待与json文件一起使用的代码的完整执行。我该如何解决?如果可能的话,我宁愿用简单的东西来解决这个问题,没有jquery和回调(我是初学者)。

3 个答案:

答案 0 :(得分:1)

你必须移动som代码才能完成这项工作。首先,在一些函数中将其拆分,然后更容易使用。我不知道它是否有效,但想法是首先加载arrayEntita。完成后,它将填充其他2个数组。当最后一个数组被填充时,它会构建表。

 var arrayCarte = [];
 var arrayEntita = [];
 var arraycardbyuser = [];
 function displayArrayCards() {
    var richiestaEntity = new XMLHttpRequest();
        richiestaEntity.onreadystatechange = function () {
             if (richiestaEntity.readyState == 4) {
             var objectentityjson = {};
             objectentityjson = JSON.parse(richiestaEntity.responseText);

              arrayEntita = objectentityjson.cards;
              BuildArrayEntita();
            }
        }
        richiestaEntity.open("GET", "danielericerca.json", true);
        richiestaEntity.send(null);
    }

    function BuildArrayEntita() {
        for (i = 0; i < arrayEntita.length; i++) {

            var vanityurla = arrayEntita[i].vanity_urls[0] + ".json";
            var urlrichiesta = "http://m.airpim.com/public/vurl/";

            var richiestaCards = new XMLHttpRequest();
            richiestaCards.onreadystatechange = function () {
                if (richiestaCards.readyState == 4) {
                    var objectcardjson = {};
                    objectcardjson = JSON.parse(richiestaCards.responseText);


                    for (j = 0; j < objectcardjson.cards.length; j++)
                        arrayCarte[j] = objectcardjson.cards[j].__guid__; //vettore che contiene i guid delle card

                    arraycardbyuser[i] = arrayCarte;

                    arrayCarte = [];
                    //If it is the last call to populate arraycardbyuser, build the table:
                    if (i + 1 == arrayEntita.length)
                        BuildTable();
                }
            }
            richiestaCards.open("GET", vanityurla, true);
            richiestaCards.send(null);
        }
    }



    function BuildTable() {
        var wrapper = document.getElementById('contenitoro');

        wrapper.innerHTML = "";

        var userTable = document.createElement('table');

        for (u = 0; u < arrayEntita.length; u++) {
            var userTr = document.createElement('tr');

            var userTdcard = document.createElement('td');
            var userTdinfo = document.createElement('td');

            var br = document.createElement('br');

            for (c = 0; c < arraycardbyuser[u].length; c++) {
                var cardImg = document.createElement('img');
                cardImg.src = "http://www.airpim.com/png/public/card/" + arraycardbyuser[u][c] + "?width=292";
                cardImg.id = "immaginecard";
                userTdcard.appendChild(br);
                userTdcard.appendChild(cardImg);

            }

            var userdivNome = document.createElement('div');
            userdivNome.id = "diverso";
            userTdinfo.appendChild(userdivNome);

            var userdivVanity = document.createElement('div');
            userdivVanity.id = "diverso";
            userTdinfo.appendChild(userdivVanity);

            var nome = "Nome: ";
            var vanityurl = "Vanity Url: ";
            userdivNome.innerHTML = nome + arrayEntita[u].__title__;
            userdivVanity.innerHTML = vanityurl + arrayEntita[u].vanity_urls[0];

            userTr.appendChild(userTdcard);
            userTr.appendChild(userTdinfo);
            userTable.appendChild(userTr);
        }

        wrapper.appendChild(userTable);
    }

我不知道这是否检查:

if (i + 1 == arrayEntita.length)
    BuildTable();

但是你必须在执行buildtable();

之前检查是否已经返回了响应

答案 1 :(得分:1)

AJAX请求是异步的。它们在执行期间到达未知期间,JavaScript不会等待服务器回复再继续。有同步XHR,但它不是理想的用途。如果你这样做,你就会失去AJAX的整个想法。

通常做的是传入一个“回调” - 一个稍后执行的函数,具体取决于你想要它执行的时间。在您的情况下,您希望在收到数据后生成表:

function getData(callback){
    //AJAX setup
    var richiestaEntity = new XMLHttpRequest();

    //listen for readystatechange
    richiestaEntity.onreadystatechange = function() {

        //listen for state 4 and ok status (200)
        if (richiestaEntity.readyState === 4 && richiestaEntity.status === 200) {

            //execute callback when data is received passing it
            //what "this" is in the callback function, as well as
            //the returned data
            callback.call(this,richiestaEntity.responseText);
        }
    }
    richiestaEntity.open("GET", "danielericerca.json"); //third parameter defaults to true
    richiestaEntity.send();
}

function displayArrayCards() {

    //this function passed to getData will be executed
    //when data arrives
    getData(function(returnedData){

        //put here what you want to execute when getData receives the data
        //"returnedData" variable inside this function is the JSON returned

    });
}

答案 2 :(得分:0)

一旦你进行了ajax调用,就将所有其余的代码放在readystatechange函数中。这样,它将按顺序执行所有操作。

编辑: @Dappergoat已经比我更好地解释了它。