Configuración de la variable local en una función de devolución de llamada de JavaScript

Question

Soy relativamente nuevo en JavaScript y pensé que sabía cómo funcionaban las funciones de devolución de llamada, pero después de un par de horas de búsqueda en la web todavía no entiendo por qué mi código no funciona.

Estoy haciendo una solicitud AJAX que devuelve una matriz de cadenas. Intento establecer esta matriz en una variable local, pero parece perder su valor tan pronto como se ejecuta la función de devolución de llamada.

var array; 

    $.ajax({ 
     type: 'GET', 
     url: 'include/load_array.php', 
     dataType: 'json', 
     success: function(data){ 
      array = data; 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
      alert("Error loading the data"); 
     } 
    }); 

    console.debug(array); 

En la consola, array aparece como undefined. ¿Alguien puede explicarme por qué no se está configurando y cómo es posible establecer una variable local en una función de devolución de llamada?

Answer 1

El problema aquí es que console.log se ejecuta de forma síncrona mientras que la llamada ajax se ejecuta de forma asíncrona. Por lo tanto, se ejecuta antes de que se complete la devolución de llamada por lo que todavía ve array como undefined porque success no se ha ejecutado todavía. Para que esto funcione, debe retrasar la llamada console.log hasta que se complete el success.

$(document).ready(function() { 
    var array; 

    var runLog = function() { 
     console.log(array); 
    }; 

    $.ajax({ 
     type: 'GET', 
     url: 'include/load_array.php', 
     dataType: 'json', 
     success: function(data){ 
     array = data; 
     runlog(); 
    }}); 
}); 

Answer 2

La primera A en ajax es para Asincrónico, lo que significa que cuando se depura la matriz, el resultado aún no se ha entregado. La matriz no está definida en el momento de mostrar su valor. Debes hacer la consola.debug debajo de array = data.

Answer 3

La función success no se ejecuta inmediatamente, sino solo después de que llega la respuesta HTTP. Por lo tanto, array sigue siendo undefined en este momento. Si desea realizar operaciones en los datos de respuesta HTTP, hágalo desde la función success o, alternativamente, defina esa operación dentro de una función y luego invoque esa función desde la devolución de llamada success.

Answer 4

AJAX es asincrónico. Está configurando la variable array, pero no hasta que se ejecute debug. Hacer una llamada AJAX envía una solicitud pero luego continúa en el código. En algún momento posterior, la solicitud regresa y se ejecutan sus funciones success o error.

Answer 5

Intente llamar una función para establecer esta variable después de su success:

var array; 

var goodToProceed = function(myArr) { 
    console.debug(myArr); 
}; 

$.ajax({ 
type: 'GET', 
url: 'include/load_array.php', 
dataType: 'json', 
success: function(data){ 
    goodToProceed(data); 
}, 
error: function(jqXHR, textStatus, errorThrown){ 
    alert("Error loading the data"); 
} 
});