Блог

У меня есть следующий код 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>"
  

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

У вас проблема не с областью видимости, у вас проблема с асинхронным характером $.getJSON вызова. $.getJSON — это вызов AJAX, а «A» в «AJAX» означает «асинхронный». Когда вы вызываете $.getJSON , он возвращает, что вы продолжаете yo 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.
});