僅在執行完所有代碼後纔會顯示JavaScript附加子（div）

Question

長話短說：獲得一個上傳文件元素和一個帶有onclick函數的按鈕，名爲「start」。因此，所有這些都是在DOM內容加載完成之後發生的。

createLoader: function(){ 
    var outerDiv = document.createElement('div'); 
    var innerDiv = document.createElement('div'); 
    innerDiv.className = '_gisplayloader'; 

    var mapDiv = this.getContainer(); 

    /*outerDiv.style = ' opacity: 0.5; background-color: grey; justify-content: center; display: flex;'; 
    outerDiv.style.position = 'absolute'; 
    outerDiv.style.zIndex = '999999999';*/ 
    outerDiv.className = '_gisplayLoaderOuterDiv'; 
    outerDiv.style.height = mapDiv.offsetHeight; 
    outerDiv.style.width = mapDiv.offsetWidth; 
    outerDiv.appendChild(innerDiv); 
    this.loaderDiv = outerDiv; 

    mapDiv.parentElement.insertBefore(outerDiv, mapDiv); 
} 

這是加載器/微調器的創建和附加代碼。如果我通過瀏覽器控制檯調用它，它會立即生效。

在start（）中，它讀取上傳的文件，onloadend調用另一個調用createLoader（）的函數。

function start(){ 
    //var data = new Array(); 
    var time = Date.now(); 

    console.log("starting..."); 

    var reader = new FileReader(); 
    reader.onloadend = function(){ 
     var data = JSON.parse(reader.result); 
     var datareadtimestamp = Date.now(); 
     makeChoropleth(map, data ,options,null); 
    } 
    reader.readAsText(document.getElementById("file").files[0]);  
} 

makeChoropleth功能的簡化版本：

makeChoropleth: function(bgmap, geometry, options,defaultid){ 

    var gismap = new Choropleth(bgmap, geometry, options); //inside here it calls createLoader() 

    //the next 3 functions take about 5-10s to execute all together 
    gismap.processData(geometry); 
    gismap.draw(); 
    gismap.buildLegend(); 

    if(options.loader != false){ 
     // gismap.loader(); that would hide the loader. disabled it so i could check if the loader was appearing at all 
    } 
} 

除非我把一個斷點內某處makeChoropleth，裝載機只顯示了所有代碼完成後。下面的代碼需要幾乎10秒才能完成，這足以創建加載器（假設它是異步的）。爲什麼會發生？如何解決它？

Answer 1

如果您希望裝載程序在文件讀取完成前出現，您需要在onloadend事件之前在start()函數中調用它。

function start(){ 
    //var data = new Array(); 
    var time = Date.now(); 

    console.log("starting..."); 

    var reader = new FileReader(); 
    reader.onloadend = function(){ 
     //stuff here only runs after the file is read completely! 
     var data = JSON.parse(reader.result); 
     var datareadtimestamp = Date.now(); 
     makeChoropleth(map, data ,options,null); 
    } 
    reader.readAsText(document.getElementById("file").files[0]); 
    createLoader();  
} 

，如果你想裝載機露面後讀取該文件完成，但你的等值線代碼運行之前，最簡單的方法是把一個1ms的超時您5-10s操作給瀏覽器的時間做迴流。 （否則阻塞碼將首先運行）。試試：

makeChoropleth: function(bgmap, geometry, options,defaultid){ 

    var gismap = new Choropleth(bgmap, geometry, options); //inside here it calls createLoader() 

    //the next 3 functions take about 5-10s to execute all together 
    setTimeout(function(){ 
     gismap.processData(geometry); 
     gismap.draw(); 
     gismap.buildLegend(); 
    },1); 

    if(options.loader != false){ 
     // gismap.loader(); that would hide the loader. disabled it so i could check if the loader was appearing at all 
    } 
}