我的问题是我想更改 html 元素的样式,然后调用一个函数。这是我调用的函数和带有元素的日志:
console.log(document.getElementById('hotLoader'));
console.log(document.getElementById('hotLoader').style);
console.log(document.getElementById('hotLoader').style.display);
self.onTableClick(e, coord, hot, ifcClass);
现在,当我调用它时,这是输出:
您可以看到第一个日志是空白的。 onTableClick()
函数结束后,第一个日志更新,我得到以下输出:
现在你可以看到标记为红色的日志已经更新了。
我遇到的问题是我需要在函数启动前出现第一个日志。我试图解决这个问题很长时间了,但找不到任何东西。
最佳答案
要让浏览器重绘(包括控制台,在许多浏览器中),您需要允许当前的 JavaScript 任务(作业)完成,然后让长时间运行的函数在后续任务/作业中发生。做到这一点的经典方法是使用延迟为 0 的 setTimeout
。
console.log(document.getElementById('hotLoader'));
console.log(document.getElementById('hotLoader').style);
console.log(document.getElementById('hotLoader').style.display);
setTimeout(() => {
self.onTableClick(e, coord, hot, ifcClass);
}, 0);
Firefox 过去需要比这更长的延迟(有时 60 毫秒或更多),但我认为它的现代版本不需要。
关于javascript - document.getElementById 在长函数之前不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56703860/