Empujando a una matriz dentro de un jQuery cada bucle

Question

Estoy usando jQuery para analizar un archivo XML, y estoy tratando de empujar cada elemento en el archivo XML a una matriz usando un jQuery .each loop. Extrañamente, si alerté sobre el valor de la matriz dentro del bucle, sale como debería, pero si intento alertar a un valor en la matriz una vez que ha finalizado, se obtiene "indefinido".

¿Hay algo extraño que sucede cuando se introducen valores en una matriz dentro de este tipo de bucle?


Aquí está el 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 

Aquí es el 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 correcta:

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

En su variante de alerta de código (splashArray [1]); se ejecuta antes de que ajax obtenga el resultado xml, por lo que splashArray estaba vacío, cuando intentas alertar al elemento con el índice 1. Tu código funciona bien solo para el modo síncrono, cuando el hilo espera la respuesta del servidor. En el modo asíncrono, debe usar la función de devolución de llamada.

Variante con devolución de llamada:

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

O uno más patrón (pseudocódigo):

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

Answer 2

notificas antes de que se está llenando la matriz. Debe comprender que XHR/Ajax es asincrónico (en lugar de sincrónico), por lo que la alerta no se ejecutará siempre después de la función de devolución de llamada, ya que llevará unos segundos realizar la solicitud HTTP real para capturar el xml, alertando dentro del la devolución de llamada garantiza que se rellene después de que se haya completado el proceso de XHR.

Obras:

var splashArray = []; 

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

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

no funciona:

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 no desea utilizar una devolución de llamada estándar, la otra opción es poner en funcionamiento un evento jQuery.