Почему переменная выходит из области видимости?

Question

У меня какая-то "странная" проблема с моим кодом.В основном это на испанском, но я уверен, что вы получите.

$('#favoritos').live( 'pagecreate',function(event){
    var favoritos = false;
    var fav_bus = '';
    var fav_bici = '';
    if (!isLocalStorageAvailable()) // Si no hay Local Storage para qué queremos entrar aqui
        $.mobile.changePage('#errorFavoritos', { transition: "pop" });
    else{
        $.each(localStorage, function(index){
            var itemKey = localStorage.key(index);
            if (itemKey.indexOf('fav')){ // Si es un favorito
                var splitted = itemKey.split('-');
                var tipo = splitted[0];
                var numero = splitted[2];
                favs_locales[itemKey] = {
                    'numero' : numero,
                    'id' : itemKey
                };
                if (tipo == 'bus'){
                    favoritos = true;
                    fav_bus = '<div data-role="collapsible>' +
                                '<h3>Parada ' + numero+ '</h3>' +
                                    '<ul data-role="listview" data-inset="true" id="'+itemKey+'">';
                    pedirTiempos(numero).pipe(formatearTiempos).done(function(html){
                        fav_bus += html + '</ul></div>';
                    });
                }
            }
        });
        // Ya tenemos los datos formateados
        console.log(fav_bus);
        if (fav_bus != ''){
            $('#contentFavoritos').append(
                                '<h3 style="text-align: center;">Paradas de Bus</h3>' +
                                    '<div data-role="collapsible-set">' +
                                        fav_bus +
                                    '</div>');
        }
    }
});

Проблема возникает в этой функции:

pedirTiempos(numero).pipe(formatearTiempos).done(function (html) {
    fav_bus += html;
});

fav_bus после изменения (в функции)все нормально но console.log(fav_bus) только после функции и это неправильно.Как будто это не изменилось в функции.

Я пытался вернуть html, но он выдает [Object, object] (в виде строки).

Есть какие-нибудь подсказки?

РЕДАКТИРОВАТЬ:

Я пытался сохранить его во временном элементе DOM, и это нормально, но я не могу вывести этот HTML (хотя он есть).

pedirTiempos(numero).pipe(formatearTiempos).done(function(html){
        fav_bus += html + '</ul></div>';
        $('#busTemp').html(fav_bus);
});

if ($('#busTemp').length > 0){
   console.log($('#busTemp').html());

И ничего не выводит!

Answer 1

Из того, что я вижу из вашего кода, done выглядит как асинхронный вызов. Поэтому функция, которую вы передаете ей, скорее всего, будет запущена после fav_bus += '</ul></div>. Вот почему вы не видите изменения.

Если вы поместите console.log внутри функции, которую вы передаете done, и еще один console.log сразу после вызова done, вы, вероятно, увидите, что внешний console.log будет запущен первым.

Чтобы решить эту проблему, любые последующие операции с fav_bus должны выполняться внутри анонимной функции, которую вы передаете done.

Кроме того, вы не можете ничего вернуть из асинхронной функции. Вот почему вам нужен обратный вызов, который будет работать с асинхронным результатом.

EDIT

Изменение кода на for..in не должно ничего ломать, если вы явно не используете индекс цикла для чего-то. Вы должны быть в состоянии заставить его работать как есть со следующим изменением:

if (tipo == 'bus') {
    favoritos = true;
    fav_bus = '<div data-role="collapsible>' + '<h3>Parada ' + numero + '</h3>' + '<ul data-role="listview" data-inset="true" id="' + itemKey + '">';
    pedirTiempos(numero).pipe(formatearTiempos).done(function (html) {
        fav_bus += html + '</ul></div>';

        // Ya tenemos los datos formateados
        if (fav_bus != '') {
            $('#contentFavoritos').append('<h3 style="text-align: center;">Paradas de Bus</h3>' + '<div data-role="collapsible-set">' + fav_bus + '</div>');
        }
    });
}

Answer 2

Переменная fav_bus является локальной для функции .live и невидима для .done.

Перемещение кода из анонимных функций будет аналогично:

function foo() {
   var a = 5;
   bar();
}

function bar() { // "a" is out of scope here.
   a += 5;
}