Performance de la fonction Javascript

Question

J'étudie javascript et json mais chaque ligne de code que j'écris est un autre problème. J'ai fait un script qui fonctionne avec json mais je suis un débutant et les performances de ce que j'ai écrit ne sont pas très bonnes. Le code ne fonctionne que si je fais un débogage pas à pas avec firebug ou d'autres outils et cela me fait penser que l'exécution du code (ou une partie de celui-ci ... celui qui crée la table comme vous le verrez) nécessite trop de temps pour que le navigateur l'arrête.

Mon code est:

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); 
} 

Comment puis-je résoudre ce problème?

Answer 1

Vous avez créé une condition de concurrence (en quelque sorte) - vous n'attendez pas que AJAX ait été analysé et que vos données aient été écrites dans les bonnes variables avant de poursuivre le reste de votre logique de page. Lorsque vous l'exécutez dans le débogueur, vous donnez à votre code assez de temps pour terminer la requête AJAX avant d'essayer d'utiliser les variables que vous remplissez dans votre gestionnaire onstatechange.

Ce code serait beaucoup plus facile avec des objets jQuery et différés:

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 
    ... 
});