Объявление глобальной переменной

Question

Я знаю, что этот вопрос задан миллион раз, так что я извиняюсь.

Я просмотрел все другие примеры, и я не понимаю, почему следующий код не работает сейчас.

Я получаю неопределенное поле оповещения, когда я размещаю его вне функции CheckinMap.

Почему?

$(document).ready(function() { 
    var MapData; 
     $(function CheckinMap() { 
       $.ajax({ 
        type: "GET", 
        url: "content/home/index.cs.asp?Process=ViewCheckinMap", 
        success: function (data) { 
         MapData = data; 
        }, 
        error: function (data) { 
         $("#checkinmap").append(data); 
        } 
       }); 
      }); 
    alert(MapData); 
    }); 

Answer 1

MapData не определен, так как alert выполняется в то время как вызов Ajax все еще работает (Ajax является асинхронной) и ответ еще не доступен. Поэтому изменить свой код таким образом

success: function (data) { 
     MapData = data; 
     alert(MapData); 
}, 

или продолжить выполнение кода вызова еще одна функция

success: function (data) { 
     continueExecution(data) 
}, 
... 

function continueExecution(data) { 
    alert(data) 
} 

или использовать отложенные объекты (на JQuery 1.5+)

$.ajax({ 
    type: "GET", 
    url: "content/home/index.cs.asp?Process=ViewCheckinMap" 
}) 
.done(function(data) { alert(data) }) 

Answer 2

Порядок выполнения является асинхронный. В настоящее время следующие шаги выполняются:

1. Ajax вызов
2. оповещения (MapData); // неизвестная функция
3. успех, который устанавливает MapData (или функцию ошибки, которая даже не установлен MapData)

Вы могли бы предупредить в функции успеха (как рекомендуется), но тогда вы, если не знаете переменная локальна для этой функции или фактически является глобальной. Чтобы проверить, действительно ли MapData является глобальным, вы можете использовать setTimeout для предупреждения переменной.

Заканчивать этот модифицированный пример кода:

// Global variable 
var MapData; 

// Global function 
function test() { 
    alert(MapData); 
} 

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "http://www.google.nl", 
     success: function (data) { 
      MapData = data; 

      // Call global function with timeout 
      setTimeout(test, 10); 
     }, 
     error: function (data) { 
      $("#checkinmap").append(data); 

      // Set error message instead of data (for testing)    
      MapData = 'error'; 

      // Call global function with timeout 
      setTimeout(test, 10); 
     } 
    }); 
}); 

Или вы можете проверить его здесь: http://jsfiddle.net/x9rXU/