为什么变量超出范围? [英] Why the variable is out of scope?

问题描述

我的代码存在怪异"问题.它主要是西班牙语，但我相信您会得到的.

I'm having some "weird" issue with my code. It's mostly in Spanish but I'm sure you will get.

$('#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)却是错误的.就像它在函数中没有改变一样.

The fav_bus after the change (in the function) it's okay but console.log(fav_bus) just after the function and it's wrong. It's like it didn't changed within the function.

我试图返回html，但是它输出的是[Object, object](作为字符串).

I've tried to return the html but what it ouputs is [Object, object] (as string).

有任何提示吗?

我尝试将其存储到临时DOM元素中，这没关系，但是我无法输出该HTML(尽管它在那里).

I've tried to store it into a temporal DOM element and it's ok but I'm not being able to output that HTML (although it's there).

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

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

什么也没输出！

推荐答案

从我的代码中可以看到，done看起来像一个异步调用.因此，传递给它的函数最有可能在fav_bus += '</ul></div>之后运行.这就是为什么您看不到更改的原因.

From what I can see from your code, done looks like an asynchronous call. So the function you are passing to it is most likely getting run after fav_bus += '</ul></div>. This is why you don't see the change.

如果将console.log放在传递给done的函数中，并将另一个console.log传递给done调用之后，则可能会先看到外部console.log运行.

If you put a console.log inside the function you pass to done and another console.log just after the call to done, you'll probably see the outside console.log run first.

要解决此问题，必须在传递给done的匿名函数中完成对fav_bus的所有后续操作.

To fix this problem, any subsequent operations with fav_bus need to be done inside the anonymous function that you are passing to done.

此外，您不能真正从异步函数返回任何东西.这就是为什么您需要一个回调，它将对异步结果进行操作的原因.

Also, you cannot really return anything from an asynchronous function. This is why you need a callback, which will operate on the asynchronous result.

编辑

将代码更改为for..in并不会真正破坏任何内容，除非您明确地将循环索引用于某些用途.您应该可以通过以下更改使它按原样工作:

Changing the code to for..in shouldn't really break anything unless you're explicitly using the loop index for something. You should be able to get it to work as-is with the following change:

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>');
        }
    });
}

这篇关于为什么变量超出范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！