JavaScriptコールバック関数のローカル変数を設定する

Question

私はJavaScriptには比較的新しいので、コールバック関数の仕組みを知っていると思っていましたが、Webを検索して2時間も経たないうちに、

文字列配列を返すAJAXリクエストを作成しています。この配列をローカル変数に設定しようとしていますが、コールバック関数が実行されるとすぐにその値を失うようです。

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

arrayは未定義として表示されます。誰も私になぜこれが設定されていないのか、コールバック関数にローカル変数を設定することができるのかを説明することはできますか？

Answer 1

ここでの問題は、console.logが、ajax呼び出しが非同期で実行されている間に同期的に実行されることです。したがって、コールバックが完了する前に実行されるので、はがまだ実行されていないため、undefinedと表示されます。この作業を行うには、successが完了するまでconsole.logコールを遅らせる必要があります。

$(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

ajaxの最初のAは非同期です。つまり、配列をデバッグしているうちにまだ結果が出力されていません。配列は、値を表示する時点では定義されていません。あなたはarray.debの下にあるconsole.debugを実行する必要があります。

Answer 3

success機能はすぐには実行されませんが、HTTP応答が到着した後にのみ実行されます。したがって、この時点でarrayはまだundefinedです。 HTTP応答データに対して操作を実行する場合は、success関数内から実行するか、関数内でその操作を定義してから、successコールバック内からその関数を呼び出します。

Answer 4

AJAXは非同期です。 array変数を設定していますが、それ以降はdebugが実行されます。 AJAX呼び出しを行うと、リクエストが送信されますが、コード内で処理が続けられます。後で、要求が返され、successまたはerror関数が実行されます。

Answer 5

はあなた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"); 
} 
});