Pousser vers un tableau dans une boucle jQuery

Question

J'utilise jQuery pour analyser un fichier XML et j'essaie de pousser chaque élément du fichier XML vers un tableau en utilisant une boucle jQuery .each. Bizarrement, si j'avertis la valeur du tableau dans la boucle, il sort comme il se doit, mais si j'essaie d'alerter une valeur dans le tableau après que la boucle soit terminée, cela se traduit par "indéfini".

Y a-t-il quelque chose d'étrange qui se produit lorsque vous placez des valeurs dans un tableau dans ce type de boucle?


Voici le Javascript:

var splashArray = new Array(); 

// Load the Splash XML file and assign each image within to an array 
$.get('splash.xml', function(xml) { 
    $('image', xml).each(function (i) { 
     splashArray.push($(this).attr("src")); 
    }); 
}); 

alert(splashArray[1]); // Results in undefined 

Voici le XML:

<?xml version="1.0" encoding="UTF-8"?> 
<site>  
    <image src="splash1.jpg" /> 
    <image src="splash2.jpg" /> 
    <image src="splash3.jpg" /> 
    <image src="splash4.jpg" /> 
    <image src="splash5.jpg" /> 
    <image src="splash6.png" /> 
</site> 

Answer 1

variante correcte:

var splashArray = new Array(); 

// Load the Splash XML file and assign each image within to an array 
$.get('splash.xml', function(xml) { 
     $('image', xml).each(function (i) { 
       splashArray.push($(this).attr("src")); 
     }); 
     alert(splashArray[1]); 
}); 

Dans votre variante d'alerte de code (splashArray [1]); s'exécute avant que ajax n'obtienne le résultat xml, donc splashArray était vide, lorsque vous essayez d'alerter l'élément avec l'index 1. Votre code ne fonctionne bien que pour le mode synchrone, lorsque le thread attend la réponse du serveur. En mode asynchrone, vous devez utiliser la fonction de rappel.

variante avec rappel:

var splashArray = new Array(); 

// Load the Splash XML file and assign each image within to an array 
$.get('splash.xml', function(xml) { 
     $('image', xml).each(function (i) { 
       splashArray.push($(this).attr("src")); 
     }); 
     work_with_splash(); 
}); 

function work_with_splash() { 
    alert(splashArray[1]); 
} 

Ou un autre motif (pseudo-code):

function process(ajax_is_done) { 
    if (!ajax_is_done) { 
     ajax(function (result) { 
      import_result(result); 
      process(true); 
     }) 
    } 
} 
process(); 

Answer 2

Vous avertissez avant le tableau est rempli. Vous devez comprendre que XHR/Ajax est asynchrone (par opposition à synchrone) afin que l'alerte ne s'exécute pas toujours après la fonction de rappel car il faudra quelques secondes pour effectuer la requête HTTP réelle pour récupérer le fichier XML, en alertant à l'intérieur du Le rappel assure qu'il est rempli après que les choses XHR sont faites.

Travaux:

var splashArray = []; 

function fn() { 
    alert(splashArray[1]); 
} 

$.get('splash.xml', function(xml) { 
     $('image', xml).each(function (i) { 
       splashArray.push($(this).attr("src")); 
     }); 
     fn(); 
}); 

ne fonctionne pas:

var splashArray = []; 

$.get('splash.xml', function(xml) { 
     $('image', xml).each(function (i) { 
       splashArray.push($(this).attr("src")); 
     }); 
     // this will populate the array almost always AFTER the alert below. 
}); 


alert(splashArray[1]); // this will almost ALWAYS alert BEFORE the callback function is done 

Answer 3

Si vous ne souhaitez pas utiliser un rappel standard, l'autre option est de déclencher un événement jQuery.