jQueryとScope - $（ '＃elements'）が関数の外にある

Question

jQueryとAjaxに関して、私は物事の範囲に関して少し混乱しています。

スクリプトが起動します。

$(document).ready(function() { 
     var page = 'index'; 
     displayContent(page) 
}); 

displayContentは、テキストコンテンツをフェッチし、「#textCotnent」のdivにそれを押し込むためのAJAX呼び出しが含まれています。

関数I alert（$（ '＃textContent'）。text（））内にある場合は、テキストを正しく通知します。

function displayContent(page) { 
     $.ajax(//ajax stuff goes here and works fine); 
     alert($('#textContent').text()) //alerts the text, hooray. 
} 

しかし、私は次の操作を実行した場合：

$(document).ready(function() { 
     var page = 'index'; 
     displayContent(page) 
     alert($('#textContent').text()); //alerts a blank box, boo. 
}); 

テキストは、AJAX呼び出しごとに表示されますが、警告がnullをポップアップします。

$（ '＃textContent'）はスクリプト内でどこで呼び出されたとしても問題ありませんが、これは当てはまりません。

jQueryについてわからないことはありますか？

Answer 1

非同期にがコールされています。コールからDOMを操作/アクセスするには、$.ajaxのコールバック関数まで待たなければなりません。私は元の構造が働いているのに驚いています。それの

function displayContent(page) { 
    $.ajax(/* ajax parameters */).complete(function() { 
    alert($('#textContent').text()) //alerts the text, hooray. 
    }); 
} 

と思いますこのよう：あなたは次のような構造を使用する必要があります$.ajax機能は、（2-3ミリ秒）の即時帰国されるとコードが実行し続けます。あなたのサーバーへのヒットは約100msかかります。したがって、あなたは銃を飛び越えており、結果を試合前にプレイする前に、アヤックスが完了するまで待つ必要があります。これは理にかなっていますか？

Answer 2

Ajaxコールは非同期（ほとんどの場合）なので、Ajaxコールが開始された直後で、Ajaxコールが応答を返す前にアラートが発生します。あなたのコードの

タイムライン：

displayContent(page); 
$.ajax(etc...); //Ajax call is sent 
alert($('#textcontent').text()); // At this point, your #textcontent element is empty 
//Sometimes later, the ajax call returns 

Answer 3

AJAX呼び出しは非同期です。したがって、AJAXリクエストが送信されている間、残りのコードが実行されます。

最初の例のように、AJAXリクエストが完了したら関数を呼び出す必要があります。