JavaScript: objetos de alcance locales que no son accesibles desde la función anidada

Question

Estoy tratando de tener una función para tomar un objeto de un archivo PHP en otra página. Estoy usando la función jQuery AJAX para hacer el JSON Grab, que funciona correctamente. El problema es cuando intento devolver ese objeto de la función.

La primera vez que registro el objeto (desde la función de éxito) es correcto en la consola, pero el objeto devuelto de la función getGantt () registra como "indefinido".

¿Cómo saco este objeto de la función?

Mi código:

    function getGantt(requestNumber){
        var ganttObject;
        $.ajax({
               type: "POST",
               url: "get_gantt.php",
               data: {request_number: requestNumber},
               success: function(returnValue){
                     ganttObject = $.parseJSON(returnValue);
                    console.log(ganttObject); //this logs a correct object in the console

                }
        });
        return ganttObject;
    }

    $(function(){ //document ready function

        var requestNumber = $('#request_number').text();

        var ganttObject = getGantt(requestNumber);
        console.log(ganttObject); //this logs "undefined"

    }); //end document ready function

Answer 1

El A en Ajax es una parte importante del acrónimo. JavaScript y XML asíncrono son asíncronos.

$.ajax({success:someFunction}) medio Realice una solicitud HTTP y cuando llegue la respuesta, ejecute someFunction

return ganttObject carreras antes de Llega la respuesta.

Debe hacer cualquier cosa que desee hacer con los datos en el interior someFunction y no intente devolver datos a la función de llamada.

Answer 2

El A en Ajax significa asíncrono. Por lo tanto, la llamada regresa inmediatamente y tan pronto como termina, se llama a la devolución de llamada de éxito.

Entonces, simplemente cambie su código para usar una devolución de llamada:

function getGantt(requestNumber, callback) {
    var ganttObject;
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: "get_gantt.php",
        data: {request_number: requestNumber},
        success: function(returnValue){
            callback(returnValue);
        }
    });
}

$(function() {

    var requestNumber = $('#request_number').text();

    var ganttObject = getGantt(requestNumber, function(ganttObject) {
        console.log(ganttObject);
    });

});

Por cierto, también he eliminado estas cosas de Parsejson: configurar el tipo de datos en JSON hace el trabajo y está menos sucio.

Answer 3

Sé por qué no lo devuelve al menos. El GantTObject puede estar en el mismo alcance, pero la función de éxito se ejecuta en última instancia en la devolución de llamada ReadyState desde el objeto XMLHTTP, por lo que está en un hilo diferente al de la función GetGantt. ¿Puede hacer el código $ (function () {... ... aparte de su función de éxito?