Can anyone help me with the following code of JavaScript?

Question

I am using this following code which works with three multiple dropdown list, when I select the options from the dropdown menu it makes the URL and go to the particular url and loads the geojson file, and that thing is kind of working fine and the following code is also working fine, but the problem comes when there is a large amount of data in geojson file, in my code it takes the geojson data and send it to the mapdata(layer1, layer2) but, its taking a lot of time to load the data, and mapdata becomes blank and i don't get the data, unless i open the debug mode and put the debugger on the mapdata and wait for 10 to 15 seconds until it loads the data, then it works fine,

so I am not sure either the sequence of my code is wrong, or I am running it onload function thats issue?

here is my code

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();
            }
        }
    }       
    });