在 javascript 函数进行过程中同步样式更改

Question

>我试图指示函数进度，而长时间运行的函数导致页面看起来无响应。我的第一次尝试是简单地使用样式表命令开始和结束我的函数，如下所示：

function myFunc() {
document.body.style.cursor = "progress";
// main guts //
document.body.style.cursor = "default";
}

这导致"进度"光标似乎没有机会在耗时的"胆量"接管之前表现出来，默认情况下以光标返回结束。在我看来，这是一个计时或同步问题，因为

function myFunc() {
document.body.style.cursor = "progress";
if(document.body.style.cursor == "progress") {
// main guts //
}
document.body.style.cursor = "default";
}

就像我第一次尝试一样，从中我推断 JavaScript 可以识别样式表更改，但在潜入"胆量"之前没有时间显示它。将样式表更改与"胆量"分开并使用 setTimeout，如下所示：

function myFunc() {
document.body.style.cursor = "progress";
setTimeout(guts, 100);  // tried up to 5000ms
document.body.style.cursor = "default";
}
function guts() {
// main guts //
}

除了增加的时间延迟之外，执行与之前的尝试没有什么不同，就好像 setTimeout 同样中断了显示样式表更改一样。

在更改为"progress"后使用 alert() 可以解决问题，但不适合预期的用法。光标在发出警报时和潜入"胆量"之前，会正确显示其新样式，如下所示：

function myFunc() {
document.body.style.cursor = "progress";
alert("!"); // main guts //
document.body.style.cursor = "default";
}

但是出于这样的原因，我不能以这种方式提示用户。另一个尝试是使用回调函数对指令进行排序，如下所示：

//// source
myFunc(guts);
//// target
function myFunc(cbFunc) {
document.body.style.cursor = "progress";
cbFunc();
document.body.style.cursor = "default";
}
function guts() {
// main guts //
}

但这会导致与非警报情况相同的性能。我也尝试使用背景颜色而不是光标样式(以防此问题特定于光标)无济于事。

有人可以识别我对javascript中的这种流量控制的误解吗？

-更新-

也无济于事：

function myFunc() {
document.body.style.cursor = "progress";
document.body.style.cursor = guts();
}
function guts() {
// main guts //
return "default";
}

感谢丹达维斯提供以下解决方案：

function myFunc() {
document.body.style.cursor = "progress";
setTimeout(guts, 50);  // needs at least 10ms in my observations
}
function guts() {
// main guts //
document.body.style.cursor = "default";
}

Answer 1

你和第二个很接近。您只需要等待"胆量"完成曲柄，然后再重新应用原始样式。 回调或超时的底部是在完美的时间内执行此操作的自然位置：

function myFunc() {
document.body.style.cursor = "progress";
setTimeout(guts, 1);
}
function guts() {
// main guts //
document.body.style.cursor = "default";
}

更改为 1ms 仍应允许样式"渗透"而不会有明显的延迟。