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;
}

我确认已将类应用于元素并在执行后被删除，但是在应用display:block类时，show CSS（位于show类中）没有得到反映。简而言之，我认为这与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的评论帮助下获得了解决方案。我想发布原因和解决方案，以便其他人可以从中获得帮助。如评论中所述，

您的JS代码从头到尾运行，只有在该控件回到渲染引擎。

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 /渲染问题

2 个答案: