<分区>
标签 javascript jquery html css dom
<分区>
我正在开发一个具有要求苛刻的更新算法的网页，我想在加载时放置一个微调器。我希望微调器仅在加载时显示，完成后消失。
我刚刚用“display: none”定义了一个 .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();
})
我希望微调器在我单击时弹出，然后在 for(..) 完成后消失，但它看起来不像。
即使在控制台中一切正常:
spinner running
Object { 0: div.spinner.hidden, length: 1, prevObject: Object(1) }
Object { 0: div.spinner, length: 1, prevObject: Object(1) }
spinner stopped
Object { 0: div.spinner, length: 1, prevObject: Object(1) }
Object { 0: div.spinner.hidden, length: 1, prevObject: Object(1) }
为什么微调器没有在 DOM 中弹出？我可以做些什么来实现我的目标？
这是一个 fiddle : https://jsfiddle.net/m1ax4nsg/11/
(for循环长度足够我的浏览器等待一段时间，如果不适合你的可以随意增加循环数)
最佳答案
您没有看到微调器出现的原因是因为在您的示例中，您的 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);
})
...
关于javascript - removeClass 在 console.log 中工作但不在 DOM 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56532473/