Сфера применения JavaScript/jQuery

Question

Я явно пишу слишком много CoffeeScript, так как теперь я понимаю, что у меня нет даже базового понимания сферы в чистом JS.

После игры на некоторое время, я не могу понять проблему с following--

$(document).ready(function() { 
    var myUrl = "http://notimportant.com/" 
    var photos = getPhotos(myUrl); 
    console.log(photos);      //undefined 
}); 

function getPhotos(url) { 
    var a; 
    $.get(url, function(data) { 
     a = data["photoset"]["photo"]; 
     console.log(a);      //my object 
    }); 
    return a; 
} 

Если я ставлю console.log (а) заявление на линии прямо под «вар а = данные [ "фотосет"] [ "фото"];» он показывает, что он правильно делает запрос GET, который я ищу. Но я не могу передать этот объект обратно в свой основной блок кода, где я хочу манипулировать им.

Заранее спасибо.

Answer 1

Причина photos не определена из-за областей. Его потому, что $.get выполняется асинхронно. $.get() возвращает объект jqXHR вместо ответа HTTP.

onSuccess Обратный звонок должен быть отправлен в getPhotos(), чтобы обеспечить его работу. В качестве альтернативы можно использовать конструкцию when().then().

$(document).ready(function() { 
    var myUrl = "http://example.com/"; 
    getPhotos(myUrl, renderCatPhotos);  
}); 

function getPhotos(url, onSuccess) { 
    $.get(url, onSuccess); 
} 

function renderCatPhotos(data) { 
    var a = data.photoset.photo; 
    console.log(a); // a is always available 
} 

примечание: вы можете даже не нужно getPhotos функцию. Вы можете просто $.get(url, onSuccess); в $(document).ready() вместо этого.

Answer 2

Это не вопрос объема, это вопрос того, что вы возвращаете неопределенную переменную до того, как $ .get определяет ее. Подумайте о том, чтобы сделать фотографии глобальными, а затем установить их в функции успеха $ .get вместо того, чтобы устанавливать ее в 'a'. Внутри функции успеха вы можете затем вызывать вызовы для других функций, которые будут управлять отображением/обработкой фотографий.