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任务（作业）完成，然后在以后的任务/作业中执行长时间运行的功能。一种典型的实现方法是使用setTimeout，延迟为0。

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过去通常需要更长的延迟时间（有时60ms或更长时间），但我认为它的现代版本不需要。