0

我正在研究 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);
}

我怎么解决这个问题？

4

1 回答 1

1

您已经创建了一个竞争条件（各种） - 您无需等到 AJAX 被解析并且您的数据已被写入正确的变量中，然后再继续处理页面逻辑的其余部分。

当您在调试器中运行它时，您最终会给代码足够的时间来完成 AJAX 请求，然后再尝试使用您在onstatechange处理程序中填充的变量。

使用 jQuery 和延迟对象，这段代码会容易得多：

var arrayCarte, arrayEntita, arraycardbyuser;

// do first seeding request
var req1 = $.ajax(...);

var req2 = [];
req1.done(function(objectentityjson) {

    arrayEntita = objectentityjson.cards;

    // initiate the inner AJAX requests
    for (var i = 0; i < arrayEntita.length; ++i) {

        var tmp = $.ajax(...);
        tmp.done(function(objectcardjson) {
            // process the sub data here
            ...
        });

        req2.push(tmp);  // keep the object around for later sync-up
    }
});

// this'll only fire when all of the inner AJAX requests have completed
$.when.apply($, req2).done(function() {
     // do the rest of your page setup here
     ...
});
于 2012-06-27T14:34:54.260 回答