JS addClass() uirepaint/渲染问题

Question

我有一个 JS 代码需要一些时间来执行，所以我想在代码执行之前显示加载程序。到目前为止我所做的就像

$(".loader-block").addClass("show");
// simulate a 5 second delay
setTimeout(() => { $(".loader-block").removeClass("show"); }, 5000);

.loader-block {
    width: 417px;
    height: 100%;
    background: #eee;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 9;
}

.loader-block.show {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="loader-block">
   <img src="/img/new-loader.gif" alt="Goodness never stops to wait for you">
</div>

JS 代码

$(".loader-block").addClass("show");
......
.... Some JS Code
......
$(".loader-block").removeClass("show");

HTML

<div class="loader-block">
   <img src="/img/new-loader.gif">
</div>

CSS

.loader-block {
    width: 417px;
    height: 100%;
    background: #eee;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 9;
}

.loader-block.show {
    display: block;
}

我确认 class 已应用于元素并在执行后被删除，但是 display:block css（位于 show class ) 在应用 show class 时不会反映出来。简而言之，我觉得这与 UI 重绘有关。任何建议将不胜感激。

我什至检查了将 display:block css 直接应用于元素，我看到 css 已应用但结果未呈现。

Answer 1

虽然对问题的评论解决了问题，但一个可行的方法是在您的 JS 执行后分派一个事件，并拥有一个可以删除微调器的事件处理程序。

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Answer 2

我在@CBroe 的评论帮助下得到了解决方案。我想 post 原因和解决方案，以便其他人可以从中得到帮助。如评论中所述，

Your JS code runs from start to finish, and only after that control is handed back to the rendering engine.

addClass() 和 removeClass() 之间的代码是连续执行的，并且仅在呈现样式更新之后才执行。所以添加一个中断解决了我的问题。

旧代码：

$(".loader-block").addClass("show");
......
.... Some JS Code
......
$(".loader-block").removeClass("show");

新代码：

$(".loader-block").addClass("show");
setTimeout(() => {
     ......
     .... Some JS Code
     ......
     $(".loader-block").removeClass("show");
}, 5);

感谢支持

JS addClass() uirepaint/渲染问题

JS addClass() uirepaint/ rendering issue

javascript

jquery

repaint