全局变量没有被全局更新

Question

我试图创建一个网页，使用JSON来可视化一个家族树。我正在使用 uploadJSON() 函数将文件中的JSON数据存储到全局变量中。tree，这似乎是工作，直到我尝试访问 tree 在另一个函数中。当我做 console.log(tree); 在 addToDropDown() 它在控制台中显示为未定义。我试过将 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 事件，所以该函数将在事件发生时被调用。