Переменная Область в JQuery плохо себя ведет

Question

У меня есть следующий код js + jQuery с некоторыми неправильно работающими областями действия var ... или, по крайней мере, неправильно работающим кодером: -p

var lookup_output="";  //believe this makes it a global scope

function lookupWord(word) {
    var url = 'http://localhost:3000/jianti/' + word + '.json';
    lookup_output = "abc";

    $.getJSON(url, function(data){
            $.each(data, function(i, word_data){
                    lookup_output += "<div> trad: " + word_data.fanti + "<br>";
                    lookup_output += "simp: " + word_data.jianti + "<br>" ;
                    lookup_output += "pinyin: " + word_data.pinyin + "<br>" ;
                    lookup_output += "def: " + word_data.def + "<br>" ;
                    lookup_output += "</div><br>";
                    alert(lookup_output);
            });     
    });

    lookup_output += "123";
    return lookup_output;
}

проблема в том, что строка

return lookup_output; 

возвращает

"abc123"

, тогда как строка

alert(lookup_output); 

дает

"abc123<div> trad: 交流<br>simp: 交流<br>pinyin: jiāo liú<br>def: exchange/give-and-take/to exchange/to alternate/communication/alternating current (electricity)<br></div><br>"

Я хочу, чтобы возвращаемая строка выдавала то же, что и выходной сигнал..ну идеи как?я думал, что, привязав его к глобальной переменной, он это сделает, но, похоже, нет.

Answer 1

У вас нет проблемы с областью видимости, у вас есть проблема с асинхронной природой вызова $.getJSON. $.getJSON - это вызов AJAX, а «A» в «AJAX» означает «асинхронный». Когда вы вызовете $.getJSON, он вернется, вы продолжите на lookup_output += "123", а затем будет вызвана функция обратного вызова $.getJSON.

Обычный подход заключается в добавлении дополнительных обратных вызовов:

function lookupWord(word, callback) {
    var url = 'http://localhost:3000/jianti/' + word + '.json';

    $.getJSON(url, function(data){
        var lookup_output = "abc";
        $.each(data, function(i, word_data){
            lookup_output += "<div> trad: " + word_data.fanti + "<br>";
            //...
        });
        lookup_output += "123";
        callback(lookup_output);    
    });
}

Тогда вы бы назвали это так:

lookupWord("someword", function(lookup_output) {
    // Do whatever needs to be done with the result.
});