在javascript函数执行过程中同步样式更改
在javascript函数执行过程中同步样式更改
提问于 2019-04-17 02:07:41
当一个长时间运行的函数导致页面显示无响应时，我正在尝试指示函数进程。我的第一个尝试是简单地使用样式表命令开始和结束我的函数，如下所示：
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";
}感谢dandavis提供的以下解决方案：
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";
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-17 02:12:01
你离第二个很近了。您只需等待“内脏”完成曲柄，然后再重新应用原始样式。回调或超时的底部是在完美的时间量内执行此操作的自然位置：
function myFunc() {
document.body.style.cursor = "progress";
setTimeout(guts, 1);
}
function guts() {
// main guts //
document.body.style.cursor = "default";
}更改为1ms应该仍然允许样式“渗透”，而不会有明显的延迟。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55714206
复制相关文章
相似问题