Question

我正在使用要求苛刻的更新算法来开发网页，并且希望在加载时放置微调框。我希望微调框仅在加载时显示，然后在完成时消失。

我刚刚定义了一个类，用“ display：none”隐藏，并使用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中弹出？我该怎么做才能达到目标？

这是一个小提琴： https://demos.telerik.com/aspnet-core/listview/index

（for循环长度足以使我的浏览器等待一段时间，如果不适合您，请随意增加循环次数）

Answer 1

之所以看不到微调器，是因为在您的示例中，您的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);
})

...

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

1 个答案: