Javascript - ネストした関数からアクセスできないローカルスコープオブジェクト

Question

別のページのPHPファイルからオブジェクトを取得しようとしています。私は正しく動作しているjsonグラブを行うには、jQueryのajax関数を使用しています。問題は、そのオブジェクトを関数から返そうとするときです。

初めて（成功関数内から）オブジェクトをログに記録すると、コンソールでは正しくなりますが、関数getGantt（）から返されたオブジェクトは「未定義」としてログに記録されます。

このオブジェクトを関数から取り除くにはどうすればよいですか？

マイコード：

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

アヤックスでAは頭字語の重要な部分です。非同期JavaScriptとXMLは非同期です。

$.ajax({success:someFunction})手段はHTTPリクエストを作成し、応答が到着したときに、応答が到着前someFunction

return ganttObjectランを実行します。

someFunction内のデータで何かしたいことを行い、データを呼び出し元の関数に返そうとしないでください。

Answer 2

私はそれが少なくともそれを戻していない理由を知っています。 ganttObjectは同じスコープ内にある可能性がありますが、成功関数は最終的にXMLHTTPオブジェクトからのreadyStateコールバックで実行されているため、getGantt関数とは異なるスレッド上にあります。

Answer 3

AJAXのAは非同期のため、すぐに呼び出しが戻り、処理が終了すると成功のコールバックが呼び出されます。

だから、単にコールバックを使用するようにコードを変更します。

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

}); 

はところで、私はまた、このparseJSONのものを削除しました - JSONにデータ型を設定すると仕事をしていませんし、あまり汚れている