ajaxコールバック関数以外の変数を使用する

Question

コールバック関数の外部でグローバル変数を使用するのに最適な方法は何ですか？

var icon; 
    $(function(){ 

     $.get('data.xml', function(xml){ 

      icon = xml.documentElement.getElementsByTagName("icon"); 
      //this outputs a value 
      console.log(icon); 
     }); 
     //this is null 
     //How can this maintain the value set above? 
     console.log(icon); 
    }); 

Answer 1

あなたが提供したコードは完全に有効です。実際には、iconはの値を維持しています。問題はおそらくget()が非同期で実行され、'data.xml'の後に匿名関数がサーバーから完全にロードされただけです。

1. コールget('data.xml', function(xml){...})（data.xmlファイルのロードを開始）
2. コールconsole.log(icon)（iconは、この時点ではまだnullである）
3. （data.xmlの完成：だから、実行の実世界のシーケンスは次のようになりますloading）今匿名関数が呼び出され、icon：icon = xml.documentElement.getElementsByTagName("icon")に値が割り当てられます。

あなたがiconの値を持つ何かをしたい場合は、後の「data.xmlには、」あなたはそれを内部の匿名のコールバック関数を実行する必要があります、フェッチされました。このように：

var icon; 
$(function(){ 

    $.get('data.xml', function(xml){ 
     icon = xml.documentElement.getElementsByTagName("icon"); 
     console.log(icon); 
    }); 
}); 

幸運！

---

注：あなたはまだ匿名関数外あるコードからiconを使用することができますが、匿名関数が実行された後まで、それにアクセスするのを待つ必要があります。これを行うための最善の方法は、独自の機能に依存するコードを入れて、その後、コールバック関数内からその関数を呼び出すことです：

var icon; 
$(function(){ 

    $.get('data.xml', function(xml){ 
     icon = xml.documentElement.getElementsByTagName("icon"); 
     loadIcon(); 
    }); 

    function loadIcon() { 
     console.log(icon); 
     // ... do whatever you need to do with icon here 
    } 
}); 

Answer 2

console.log(icon);は、非同期ajaxを実行しているときにその時点で値を持ちません。応答を処理するコード全体を、コールバック関数または呼び出し関数で移動します。

$(function(){ 

    $.get('data.xml', function(xml) { 
     var icon = xml.documentElement.getElementsByTagName("icon"); 
     console.log(icon); 
    }); 
}); 

Answer 3

問題は、$.getが要求をキューに入れているが、要求を同期的に実行していないことです。すぐに戻ります。 JavaScriptはマルチスレッドではありません！

console.log(icon)の中でコールバック関数を実行する必要があります。行が実行されている時点で、AJAX呼び出しはまだ完了していません。

グローバルicon変数は、をコールバックから設定します。その点であなたのコードは正しいです。

Answer 4

それは、このようなコードを視覚化するのに役立ちます。

var icon; 
    $(function(){ 
     $.get('data.xml', callback); // sends ajax request 
     // next line happens immediately unless ajax request is set to synchronous 
     console.log(icon); // logs undefined 
    }); 
    function callback(xml){ // onsuccess callback happens 
     icon = xml.documentElement.getElementsByTagName("icon"); 
     console.log(icon); // logs Array 
    } 

私は匿名関数を削除し、console.logの後にコールバックを配置しました。他の人は、JavaScriptが実行し続けている間に、非同期的にAJAXコールバックが発生することを指摘しています。