проблема области видимости JavaScript с jquery и ajax

Question

У меня есть функция, которая делает вызов jQuery Ajax в API BART, чтобы получить серию следующих поездов. Функция должна возвращать строку следующих поездов:

function getNextTrain(station)
{   
    var returnString = "";
    var title = station.title;

    $.ajax({
        type:"GET",
        url:"http://api.bart.gov/api/etd.aspx?cmd=etd&orig="+title+"&key=2BDD-I3UG-U3L6-ZNK2",
        dataType:"xml",
        success: function(xml){

            $(xml).find("estimate").each(function(){
                returnString += "-------------------<br>"
                               +"Train: " + $(this).find("color").text() + "<br>"
                               +"Direction: " + $(this).find("direction").text() + "<br>"
                               +"ETD: " + $(this).find("minutes").text() + " minutes<br>";
            });
        // console.log(returnString);   
        }
    }); 
    return returnString;
 }

если я выводю строку в консоль сразу после $ (xml) .find ("эстимейт"). Each (закрывающая фигурная скобка ... (в настоящий момент закомментированная)) - строка верна:

-------------------<br>Train: BLUE<br>Direction: South<br>ETD: 4 minutes<br>------------`-------<br>Train: GREEN<br>Direction: South<br>ETD: 12 minutes<br>-------------------<br>Train: BLUE<br>Direction: South<br>ETD: 19 minutes<br>-------------------<br>Train: BLUE<br>Direction: North<br>ETD: 11 minutes<br>-------------------<br>Train: BLUE<br>Direction: North<br>ETD: 26 minutes<br>-------------------<br>Train: BLUE<br>Direction: North<br>ETD: 41 minutes<br>-------------------<br>Train: GREEN<br>Direction: North<br>ETD: 3 minutes<br>-------------------<br>Train: GREEN<br>Direction: North<br>ETD: 18 minutes<br>-------------------<br>Train: GREEN<br>Direction: North<br>ETD: 33 minutes<br>-------------------<br>Train: RED<br>Direction: South<br>ETD: 8 minutes<br>-------------------<br>Train: RED<br>Direction: South<br>ETD: 23 minutes<br>-------------------<br>Train: RED<br>Direction: South<br>ETD: 37 minutes<br>-------------------<br>Train: YELLOW<br>Direction: North<br>ETD: 14 minutes<br>-------------------<br>Train: YELLOW<br>Direction: North<br>ETD: 29 minutes<br>-------------------<br>Train: YELLOW<br>Direction: North<br>ETD: 44 minutes<br>-------------------<br>Train: RED<br>Direction: North<br>ETD: 6 minutes<br>-------------------<br>Train: RED<br>Direction: North<br>ETD: 22 minutes<br>-------------------<br>Train: RED<br>Direction: North<br>ETD: 37 minutes<br>-------------------<br>Train: YELLOW<br>Direction: South<br>ETD: Arrived minutes<br>-------------------<br>Train: YELLOW<br>Direction: South<br>ETD: 15 minutes<br>-------------------<br>Train: YELLOW<br>Direction: South<br>ETD: 30 minutes<br>`

но когда я его возвращаю (или записываю, где находится оператор return), я получаю пустую строку. Я старался: -объяснение глобальной переменной вне функции -используя функцию concat () - возврат в точку, где я успешно записал строку

Независимо от того, что я делаю, при просмотре возвращаемого значения в вызывающей функции я получаю пустую строку. Я был заблокирован в течение нескольких часов, и я не знаю, что я делаю неправильно. Я ценю любую помощь!

Answer 1

.success не вызывается сразу. Он вызывается только тогда, когда ваш запрос Ajax возвращается успешно. Вам нужно иметь глобальную переменную и установить ее из обратного вызова success, чтобы она работала.

Лучше (поскольку глобальные переменные являются злом), используйте обратный вызов:

function printListofStations(list) {
   console.log(returnString);  
}

function getNextTrain(station, printListofStations)
{   
    var returnString = "";
    var title = station.title;

    $.ajax({
        type:"GET",
        url:"http://api.bart.gov/api/etd.aspx?cmd=etd&orig="+title+"&key=2BDD-I3UG-U3L6-ZNK2",
        dataType:"xml",
        success: function(xml){

            $(xml).find("estimate").each(function(){
                returnString += "-------------------<br>"
                               +"Train: " + $(this).find("color").text() + "<br>"
                               +"Direction: " + $(this).find("direction").text() + "<br>"
                               +"ETD: " + $(this).find("minutes").text() + " minutes<br>";
                printListofStations(returnString);
            });

        }
    }); 
 }

Answer 2

Это потому, что по умолчанию ajax является асинхронным. Вы должны установить async в false, если хотите что-то вернуть из этого метода.

$.ajax({
        type:"GET",
        url:"http://api.bart.gov/api/etd.aspx?cmd=etd&orig="+title+"&key=2BDD-I3UG-U3L6-ZNK2",
        dataType:"xml",
        async: false,
        success: function(xml){

            $(xml).find("estimate").each(function(){
                returnString += "-------------------<br>"
                               +"Train: " + $(this).find("color").text() + "<br>"
                               +"Direction: " + $(this).find("direction").text() + "<br>"
                               +"ETD: " + $(this).find("minutes").text() + " minutes<br>";
            });
        // console.log(returnString);   
        }
    });