Переменная jQuery становится неопределенной без причины

Question

У меня есть следующий код, в котором я хочу сохранить содержимое файла bar.txt в переменной foo:

var foo;

jQuery.get('http://example.com/bar.txt', function(data) {
     foo = data;
     alert(foo);
});        

alert(foo);

Проблема заключается в том, что, по-видимому, после завершения функции jQueryпеременная становится неопределенной (даже если она была объявлена ​​ вне этой области).Первый alert(foo) правильно отображает содержимое файла, а второй ничего не показывает.

Кто-нибудь может мне сказать, что здесь происходит?

Answer 1

Так работает асинхронное программирование .Функция $.get «заканчивается», когда вызывается обработчик обратного вызова, а не линейно, следуя коду.

«Первый» alert(), который сработает при запуске этого кода, будет вызван в последней строке (вне $.get обработчика), к тому времени запрос ajax еще не был выполнен.

Второй alert произойдет, когда завершится ajax (внутри обработчика $.get), и отобразит данные, которые вы присвоили переменной, исходя из аргумента обработчика.

Некоторые комментарии к вашему коду, надеюсь, вы поймете лучше:

var foo; // foo is now undefined

jQuery.get('http://example.com/bar.txt', function(data) {
     // the code in this handler will be executed after the ajax is complete
     foo = data;
     alert(foo); // foo is now the contents of bar.txt, this will happen last
});        

alert(foo); // foo is still undefined, and this alert happens first

Вы можете запрограммировать это по-другому, если вам нужен пример того, как «повторно использовать» переменную foo:

var foo;

jQuery.get('http://example.com/bar.txt', function(data) {
     foo = data;
     onData();
});        

function onData() {
    alert(foo);
}

Answer 2

попробуй

var foo;

jQuery.get('http://example.com/bar.txt', function(data) {
     window.foo = data;
     alert(foo);
});        

alert(foo);