2012-06-10 11 views
15

$ .get関数の問題が発生しました。私は$.get非同期あるのでxyzがnullの結果を警告することを知っているAJAXを "get"関数と同期させる/結果を得る方法?

xyz = null 

    $.get('http://www.someurl.com/123=json', function(data) { 
     var xyz = data.positions[0].latitude; 
    }); 

alert(xyz); 
//some more code using xyz variable 

: urlはJSON

私のコードが含まれています。

xyzはこの機能を使用することができません。

+0

'var'キーワードをあなたの最初の 'xyz'の前に、あなたのajaxリクエストが完了した後に実行される任意の関数で、そのスコープ内のどこでも使用できます。 – Paulpro

+4

* **同期** AJAX(これは* jQueryで*文書化されています)の間は、ユーザーエクスペリエンスに悪影響を与えるため、通常避けるべきです*。代わりに、非同期AJAXのイベントベースのモデルを使用することに焦点を当てます。つまり、コールバック内からDOMを 'xyz' *で更新します。 –

+0

@pst。いつも同じ質問。この1つとDOMの準備問題。 – gdoron

答えて

7

本当の答えはNO ですが、あなたはこれを使用することができます。

function useXYZ(){ 
    alert(xyz); 
} 

xyz = null   

$.get('http://www.someurl.com/123=json', function(data) { 
    xyz = data.positions[0].latitude; 
    useXYZ(); 
}); 
+0

なぜグローバルな財産の時間と精神的な混乱を無駄にするのですか? (または変数を閉じた)。 'function useXYZ(xyz){..}' ...と書かれた方がよく、コールバックのデータを渡します。 –

+0

@pst。私はそうすることを考えましたが、私は彼に外部変数をどのように使用できるかを示したかったのです。 (BTW、それはグローバル変数である必要はありません)。あなたはあなたが望むように編集することができます! – gdoron

+0

ありがとう!私はまだスクリプトの残りの部分で問題を抱えているアラートでうまくいくと思った。そして、実際に関数の中にたくさんのものを入れなければならないときには、useXYZ(){...} – Diolor

22

getはショートカットです。あなたが使用して、同じですが、同期を行うことができます。

var xyz = null 


$.ajax({ url: 'http://www.someurl.com/123=json', 
     async: false, 
     dataType: 'json', 
     success: function(data) { 
       xyz = data.positions[0].latitude; 
      } 
     }); 


alert(xyz); 
あなたはしかし、AJAX呼び出しの前に xyz変数を宣言する必要があります

+0

まあまあ、私の最初の答えは貧弱でした。私は本当に私の電話からの質問に答えるのをやめてください。 – HackedByChinese

+0

ChromeとFirefoxで、まだnullが返ってきています。サファリでうまく動作します – Diolor

+0

うーん。私はSafari、Chrome、Firefox(OSX上)でテストしました。純粋な例http://jsfiddle.net/HackedByChinese/F2Ey5/1/ – HackedByChinese

4

これはJavascriptの一般的な問題です。 Javascriptコードは継続渡しスタイルで記述する必要があります。その迷惑なものですが、あなたはあまり考えずに変えることができます。

Basicaly、我々は

var x = someSyncFunction(a, b, c); 
//do something with x 
console.log(x); 

のようなものを持っているでしょうたび私たちは、機能が継続関数に戻った後、すべてのコードを作成し、パラメータに変数からのxを回して、非同期コードに変換することができます継続コールバック。

someAsyncFunction(a, b, c, function(x){ 
    //do something with x; 
    console.log(x); 
}); 

あなたは非常に分かりやすいコードを書くことに注意しなければなりません。心に留めておくべき良いトリックは、自分の関数がコールバックを受け取れるようにすることです。これは

var getXyz = function(onResult){ //async functions that return do so via callbacks 
           //you can also another callback for errors (kind of analogous to throw) 
    $.get('http://www.someurl.com/123=json', function(data) { 
     var xyz = data.positions[0].latitude; 
     onResult(xyz); //instead of writing "return xyz", we pass x to the callback explicitely. 
    }); 
}; 

getXyz(function(xyz){ //this would look like "var xyz = getXyz();" if it were sync code instead. 
    console.log('got xyz'); 
}); 

(値を返す通常の同期のヘルパー関数は、異なる機能で使用することができます同じように)彼らは別の関数で使用することができ、ここでのトリックはへの呼び出しに関数からのすべてのreturn文を変更することですコールバック関数。あたかもasync関数が返されなかったかのように考えて、誰かに値を返す唯一の方法は、その値をコールバックに渡すことです。


あなたはなぜこれを行うのが簡単でないのかと尋ねるかもしれません。さて、あなたはJavascriptの代わりに別の言語を使用しない限り(あるいは少なくとも同期的なスタイルで非同期コードを書くことができるが、通常のJavaScriptに自動的にコンパイルするものを使用しない限り)

+0

ありがとう!緯度の「xyz」とlongitudeの「abc」のようにJSONから2つの変数を取得しなければならない場合はどうなりますか? onResultはどのようにして関数(xyz)になりますか?私はそれらをその中に入れたり、2番目の関数(abc)を作成する必要がありますか? – Diolor

+0

両方の値を単一のオブジェクトの中にパッケージ化し、そのオブジェクトをコールバック 'onResult({lat:xyz、long:abc});'に渡すことができます。これは同期関数から複数の値を返す方法と同様です。コールバック関数は1つの 'onResult(xyz、abc);ではなく2つのパラメータを受け取ります。通常は、相互に排他的な計算パスが異なるため、複数のコールバックを持つことが一般的です。一般的な例として、成功(または "戻る")コールバックとエラー(または "スロー")コールバックが1つあります。 – hugomg

関連する問題