任何人都可以通过以下JavaScript代码帮助我吗？

Question

我正在使用下面的代码，该代码可用于三个多重下拉列表，当我从下拉菜单中选择选项时，它使URL并转到特定的url和loads geojson文件，那东西可以正常工作，下面的代码也可以正常工作，但是问题出在geojson文件中有大量数据时，在我的代码中，它需要geojson数据并将其发送到mapdata(layer1, layer2)，但是加载数据要花费很多时间，mapdata变成空白，我没有得到数据， 除非我打开调试模式并将调试器放在mapdata上，然后等待10到15秒钟，直到它加载数据，然后它才能正常工作，

所以我不确定我的代码顺序是否错误，还是我正在运行它的onload函数？

这是我的代码

map.on('load', function() {

        //using the change function to make the URL and fetch the data from the given path   
    document.getElementById('Zone').onchange= function() {
         var zoneVal = this.value
         document.getElementById('year').onchange = function() {
            var yearVal = this.value;
            document.getElementById('month').onchange = function() {
                var monthVal = this.value;
                pathRawGeometery = "http://localhost/thesisViz/mapbox/" + zoneVal + "/" +yearVal+ "/" + monthVal + "/" +zoneVal+"_"+yearVal+"_"+monthVal+"_rawGeometery.geojson";
                pathCleanGeometery = "http://localhost/thesisViz/mapbox/" + zoneVal + "/" +yearVal+ "/" + monthVal + "/" +zoneVal+"_"+yearVal+"_"+monthVal+"_cleanedGeometery.geojson";
                console.log(pathRawGeometery)
                console.log(pathCleanGeometery)

                //reading the Geojson files into an object and sending it to mapData
                $.getJSON(pathRawGeometery, function (data){
                    // progressbarData()
                    myJsonData = data;
                })

                $.getJSON(pathCleanGeometery, function (data){
                    // progressbarData()
                    myJsonDataLayer = data;
                })
                mapData (myJsonData, myJsonDataLayer)
                // layercontrol();
            }
        }
    }       
    });