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が解析され、データが適切な変数に書き込まれるのを待ってから、残りのページロジックに進みます。

デバッガーで実行すると、onstatechangeハンドラーに入力した変数を使用する前に、AJAXリクエストを完了するのに十分な時間をコードに与えることになります。

このコードは、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 に答える