Глобальная переменная не обновляется глобально

Question

Я пытаюсь создать веб-страницу для визуализации генеалогического древа, используя JSON. Я использую функцию uploadJSON() для хранения данных JSON из файла в глобальной переменной tree, которая, кажется, работает, пока я не попытаюсь получить доступ к tree в другой функции. Когда я делаю console.log(tree); в addToDropDown(), он отображается в консоли как undefined. Я пробовал установить tree на значение по умолчанию "Testing" при инициализации, которое не перезаписывается, когда я вызываю uploadJSON().

let tree;
let dropDown;

window.onload = function() {

    // Upload JSON File
    document.getElementById( 'upload-button' ).onclick = function() { uploadJSON(); };

    // Get Dropdown
    dropDown = document.getElementById( 'family-memeber-select' );

}

function uploadJSON() {

    let files = document.getElementById( 'upload-file' ).files;
    if( files.length <= 0 ) {
        return false;
    }

    let fr = new FileReader();

    fr.onload = function( e ) {
        console.log( e );
        let result = JSON.parse( e.target.result );
        tree = result;
        console.log(tree); // This outputs the tree object from the JSON file as expected
    }

    fr.readAsText( files.item(0) );


    addToDropdown();
}


function addToDropdown()  {
    // Add all family members to a dropdown list

    console.log( tree );
}

Answer 1

fr.onload устанавливает прослушиватель событий, затем вызывается функция addToDropdown(), поэтому, когда она вызывается, fr.onload еще не вызывается, я думаю, что лучшим решением будет вызов функции addToDropdown() в событии fr.onload, поэтому функция будет вызываться при срабатывании события