Pushing zu einem Array innerhalb einer jQuery jede Schleife

Question

Ich benutze jQuery, um eine XML-Datei zu analysieren, und ich versuche, jedes Element in der XML-Datei zu einem Array mit einer jQuery .EACH-Schleife. Seltsamerweise, wenn ich den Wert des Arrays innerhalb der Schleife alarmiere, kommt es so heraus, wie es sollte, aber wenn ich versuche, einen Wert im Array zu alarmieren, nachdem die Schleife beendet ist, ergibt es "undefiniert".

Gibt es etwas Seltsames, das passiert, wenn Sie innerhalb einer solchen Schleife Werte an ein Array senden? Hier


ist 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 

Hier ist der XML ist:

<?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

richtige Variante:

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

In Ihrer Variante der Code-Warnung (splashArray [1]); Wird ausgeführt, bevor ajax xml result erhält, daher war splashArray leer, wenn Sie versuchen, ein Element mit Index 1 zu alarmieren. Ihr Code funktioniert nur für den synchronen Modus, wenn der Thread auf die Serverantwort wartet. Im asynchronen Modus sollten Sie die Callback-Funktion verwenden.

Variante mit Rückruf:

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

oder ein weiteres Muster (Pseudocode):

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

Answer 2

Du Alarmierungs bevor das Array gefüllt wird. Sie müssen verstehen, dass XHR/Ajax asynchron ist (im Gegensatz zu synchron), so dass die Warnung nicht immer nach der Callback-Funktion ausgeführt wird, weil es ein paar Sekunden dauern wird, um die eigentliche HTTP-Anforderung zu ergreifen, die Xml zu alarmieren Callback stellt sicher, dass es gefüllt wird, nachdem das XHR-Zeug fertig ist.

Works:

var splashArray = []; 

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

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

funktioniert nicht:

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

Wenn Sie die andere Option keinen Standard-Callback verwenden möchten, ist ein jQuery Ereignis auszulösen.