javascript - 浏览器错误？除非闲置至少 20ms，否则无法显示忙碌指示器

Question

我遇到的问题是浏览器并不总是在应该显示“忙”指示器时显示。

下面的代码是 TypeScript，但它当然只是变成了 JavaScript。这使用了剑道，但其他浏览器调用也不起作用。我尝试过只显示一个繁忙的 gif、一个 jQuery 繁忙插件，甚至只是在 html 中添加了一些文本。

  private demo() { 
     let that = this;
     this.slowOperation(function () {
        that.cpuIntensiveCode();
     }, 20); // < 20 fails to show busy; >= 20 works, but > 50 is better
  }

  private slowOperation(fun: any, ms: number) {
     kendo.ui.progress($(".spinner"), true);
     setTimeout(() => this.callback(fun), ms);
  }

  private callback(fun: any) {
     fun();
     kendo.ui.progress($(".spinner"), false);
  }

如果我将毫秒设置为 0，则忙碌指示器不会显示，即使它应该显示。这是某种浏览器(Chrome/Firefox)错误吗？ “slowOperation”在当前线程上返回，因此浏览器有机会在调用“callback”之前更新显示，但由于某种原因它没有这样做。

如何显示繁忙指示器，而又不必强制一小段时间不执行任何操作？这种延迟是显而易见的；实际上，“cpuIntentialCode”中有很多变化(我的 UI 有大量的用户选择和组合)，它可能很慢，也可能很快，所以我不想为其添加 20ms。知道需要多长时间将是一堆我不想要的代码。只是希望浏览器执行它被告知执行的操作。

Answer 1

由于只有一个线程，渲染的

kendo.ui.progress($(".spinner"), true);

被阻止，理论上可能/可能有来自该方法的回调，这将确保渲染完成后进行后续计算。

基本上，您不能期望渲染成为同步脚本执行的一部分。当然，您可以使用 requestAnimationFrame 来制作一些东西，但我认为应该首选渲染方法或 Web Worker 的回调。

您所说的 20 毫秒时间只是确保进度旋转器的渲染在计算开始之前完成。

我提出了相同的工作 jsfiddle，它显示了您所谈论的内容，以及 Web Worker 的解决方案，它将在单独的线程上执行 CPU 密集型代码。

https://jsfiddle.net/ivarprudnikov/g3uktx9d/