Javascript removeClass在console.log中工作，但不在DOM中工作

我正在开发一个具有严格更新算法的网页，我想在加载时放置一个微调器。我希望微调器仅在加载时显示，然后在完成后消失

我刚刚用“display:none”定义了一个class.hidden，并使用jQuery选择我的div.spinner并删除/添加隐藏的类

function startSpinner() {
    console.log("spinner running");
    console.log($(".spinner"));   
    $(".spinner.hidden").removeClass("hidden");
    console.log($(".spinner"));
}

function stopSpinner() {
    console.log("spinner stopped");
    console.log($(".spinner"));   
    $(".spinner").addClass("hidden");
    console.log($(".spinner"));
}

$(".btn").click((e) => {
    startSpinner();
  for(let i=0; i<1000000000; i++) {
    // some hard work
  }
  stopSpinner();
})

为什么旋转器没有出现在DOM中？我能做些什么来达到我的目标呢

这是一把小提琴：

---

（对于周期长度，我的浏览器可以等待一段时间，如果不是您的，请随意增加周期数）

您没有看到微调器显示的原因是，在您的示例中，您的CPU消耗工作与微调器的显示和隐藏是同步的，并且阻止了微调器的显示和隐藏（JS线程按顺序运行所有代码，不允许DOM在其间更新）

如果您的真实代码是异步的，您不应该有这个问题，或者如果它是JS CPU密集型的，您可以在启动它之前设置一个超时，以给DOM更新时间，即：

...

function cpuIntensiveWork() {
  for(let i=0; i<1000000000; i++) {
    // some hard work
  }
  stopSpinner();
}

$(".btn").click((e) => {
  startSpinner();
  setTimeout(cpuIntensiveWork, 10);
})

...

。。。
函数cpuIntensiveWork（）{
for（设i=0；i{
startSpinner（）；
设置超时（cpuIntensiveWork，10）；
})
...

我已经摆弄了你的代码，这就是我发现的，可能是机器相关=>我禁用了

stopSpinner

功能，并意识到spinner出现之前花了很长时间，这意味着spinner在再次隐藏之前从未显示过。可能的原因-堆栈溢出；）我认为@Splasted Potations的答案应该可以正常工作。如果不行，你可以使用

setTimeout

延迟。它成功了，万分感谢！我怀疑与同步有关，但控制台中的日志让我困惑。它可能是内部更新的，但它等待代码结束以显示所有更改然后就太晚了，是吗？谢谢again@silviajoy确切地说，所有代码都在运行，但是JS线程阻止UI更新，直到它完成为止，现在已经太晚了。很高兴它为您工作，很高兴能提供帮助！

...

function cpuIntensiveWork() {
  for(let i=0; i<1000000000; i++) {
    // some hard work
  }
  stopSpinner();
}

$(".btn").click((e) => {
  startSpinner();
  setTimeout(cpuIntensiveWork, 10);
})

...