Проблема с неопределенной переменной

Question

Я пытаюсь запустить это:

function loadApp() {
    var content = getContent("content.xml");
    createMap(content);
}

function getContent(file) {
    $.ajax({
        type: "GET",
        url: file,
        dataType: "xml",
        success: parseXml
    });

    function parseXml(xml) {
        var content = [];
        $("element", xml).each(function () {
            var var1 = $(this).children("var1").text(),
            content.push(var1)
        });

        return content;
    }
}

    function createMap(content) {
        alert(content);
    }

Но когда я открываю страницу, предупреждение говорит, что моя переменная content не определена. getContent() работает нормально и выдает content строковое значение, когда я удаляю createMap(content); из loadApp(). Кажется, что createMap() работает до getContent(), и поэтому переменная еще не определена, есть идеи, почему это происходит и как я могу ее решить?

Заранее спасибо.

Answer 1

Я бы предположил, что getContent() делает асинхронный вызов AJAX.Если это так, функция createMap() вызывается до получения ответа.

В таком случае я бы изменил функцию getContent(), чтобы вы могли передать createMap()функция к нему, и вызвать его в нужное время.

function loadApp() {
    getContent( "content.xml", createMap );
}

function getContent( file, fn ) {
    $.ajax({
        type: "GET",
        url: file,
        dataType: "xml",
        success: parseXml
    });

    function parseXml(xml) {
        var content = [];
        $("element", xml).each(function () {
            var var1 = $(this).children("var1").text(),
            content.push(var1)
        });
          // Call "fn" instead of returning "content"
        fn( content );
    }
}