JavaScript追加的子级(div)仅在执行完所有代码后才会出现
JavaScript追加的子级(div)仅在执行完所有代码后才会出现
提问于 2016-07-28 09:52:15
长话短说:获得了一个上传文件元素和一个带有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秒才能完成，这足以创建加载器(假设它是异步的)。为什么会发生这种情况？怎么解决这个问题呢？
Stack Overflow用户
回答已采纳
发布于 2016-07-28 10:11:35
如果您希望加载器在文件读取完成之前出现，则需要在start()函数中的onloadend事件之前调用它。
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();
}如果你想让加载器在文件读取完成之后，但是在你的Choropleth代码运行之前出现，最简单的方法是在你的5-10s操作上设置一个1ms的超时时间，让浏览器有时间进行回流。(否则阻塞代码将首先运行)。尝试：
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
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38625907
复制相关文章
相似问题
腾讯云开发者
