javascript - document.getElementById 在长函数之前不起作用？

Question

我的问题是我想更改 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() 函数结束后，第一个日志更新，我得到以下输出:

现在你可以看到标记为红色的日志已经更新了。

我遇到的问题是我需要在函数启动前出现第一个日志。我试图解决这个问题很长时间了，但找不到任何东西。

Answer 1

要让浏览器重绘(包括控制台，在许多浏览器中)，您需要允许当前的 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 毫秒或更多)，但我认为它的现代版本不需要。