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";
}

感谢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";
}

Answer 1

您与第二个紧密。在重新应用原始样式之前，您只需要等待“胆量”完成曲调即可。回调或超时的底部是在最理想的时间内完成此操作的自然位置：

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

}

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

更改为1ms仍应使样式“渗透”而不会出现明显的延迟。

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

1 个答案: