Использование переменной вне функции обратного вызова 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. call console.log(icon) (icon все еще нулевой в этой точке)
3. (data.xml завершил загрузку) теперь вызывается анонимная функция, которая присваивает значение значку: 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

Это может помочь визуализировать код следующим образом.

    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. Как и другие указали, обратный вызов ajax происходит асинхронно, в то время как JavaScript продолжает выполняться.

Answer 3

Проблема в том, что $.get ставит в очередь запрос, но не выполняет запрос синхронно;это возвращается немедленно.JavaScript не является многопоточным!

Вам нужно будет выполнить console.log(icon) внутри функции обратного вызова.В момент выполнения строки вызов AJAX еще не завершен.

Глобальная icon переменная будет установлена ​​из обратного вызова;в этом отношении ваш код верен.

Answer 4

console.log(icon); не будет иметь значения в тот момент, когда вы выполняете асинхронный ajax.Переместите весь код, который обрабатывает ответ, в функцию обратного вызова или функции, которые он вызывает.

$(function(){

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