jQuery & Scope - $ ('# elements') вне функции

Question

Я немного запутался в том, что касается jQuery и Ajax.

Начало скрипта:

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

displayContent содержит вызов ajax для извлечения текстового содержимого и помещения его в div '#textCotnent'.

Если в функции, которую я предупреждаю ($ ('# 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, но предупреждение появляется нулевым.

Я бы предположил, что $ ('# textContent') будет в порядке, независимо от того, где вы вызвали его в скрипте, но, похоже, это не так.

Что я не понимаю в jQuery?

Answer 1

Ajax-вызов выполняется асинхронно . Вы должны дождаться функции обратного вызова из $.ajax, чтобы манипулировать / получать доступ к DOM из вызова. Я удивлен, оригинальная структура работает. Вы должны использовать следующую структуру:

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

Думайте об этом так: $.ajax функция возвращается немедленно (через 2-3 мс), и код продолжает работать. Попадание на ваш сервер занимает ~ 100 мс. Таким образом, вы прыгаете с пистолета и должны подождать, пока ajax завершит свою работу, прежде чем поиграть с результатами. Имеет ли это смысл?

Answer 2

AJAX-вызовы являются асинхронными. Поэтому во время отправки запроса AJAX остальная часть кода будет выполняться.

Вам нужно вызвать функцию после завершения запроса AJAX, как вы это делали в первом примере.

Answer 3

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