如何在所有挂起的操作完成之前阻止 UI？答案

【问题标题】：How to block UI until all pending operations are complete?如何在所有挂起的操作完成之前阻止 UI？
【发布时间】：2020-06-05 15:01:37
【问题描述】：

我有一个带有 NgxSpinner 的 Angular 8 网络应用程序。当一些冗长的过程正在进行时，我使用它来阻止 UI，以防止用户在某些部分尚未完全加载时与复杂的表单进行交互。

问题是如果某个进程调用hide，NgxSpinner 会立即隐藏自己，无论是否还有另一个进程具有自己的show/hide 调用对运行。因此，当任何较短的进程完成并调用spinner.hide() 时，该网页过早解除阻塞。

这是Stackblitz 示例。

如何让 NgxSpinner 等待最后一个 hide 匹配所有 show 调用？

附：这似乎是我尝试过的许多 UI 块库的问题 - 它们只是不考虑多次调用 show/hide 的并行进程。

【问题讨论】：

我认为，您可以在服务中添加一个计数器，在每个进程调用时递增，并在完成时递减。一旦它为零，您就可以调用 spinner.hide() 方法。希望你明白。我无法访问 Stackblitz 页面。
这能回答你的问题吗？ Angular show spinner for every HTTP request with very less code changes
@akpgp 谢谢，它提供了关于引用计数实现的想法。我希望有一些内置的 UI 阻止程序，但显然没有，我必须将 NgxSpinner 包装在我自己的引用计数服务中。

标签： angular ngx-spinner

【解决方案1】：

为微调器创建一项服务并在那里保持显示/隐藏计数。

export class MySpinnerService {
  showIndex = 0;
  hideIndex = 0;

  constructor(private spinner: NgxSpinnerService) {}

  show() {
    this.showIndex++;
    this.spinner.show();
    console.log('show spinner', this.showIndex);
  }

  hide() {
    this.hideIndex++;
    if (this.showIndex === this.hideIndex) {
      this.spinner.hide();
      console.log('hide spinner', this.hideIndex);      
    }
  }

所以当showIndex 和hideIndex 相等时，您需要隐藏微调器。

调用你的组件

this.mySpinner.show(); // show spinner
this.mySpinner.hide(); // hide spinner

这是Stackblitz 中的示例。

【讨论】：

【解决方案2】：

你可以使用 Promise。每个 Process 函数都会返回一个 Promise，然后你可以使用 Promise.all 函数，一旦所有的 Promise 都解决了，它就会被调用。您可以在 promise.all 方法中隐藏微调器。请在下面找到示例代码。

this.spinner.show();
let p1 = new Promise((resolve, reject) => {

  setTimeout(() => {
    resolve();
  }, 3000);

});

let p2 = new Promise((resolve, reject) => {

  setTimeout(() => {
    resolve();
  }, 3000);

});

Promise.all([p1,p2]).then( ()=> {
  this.spinner.hide();
})

【讨论】：

不幸的是，现实生活中并没有那么简单。我的 StackBlitz 代码是非常简化的示例。实际上，微调器在许多服务和组件中到处都显示和隐藏，我只想确保微调器在最后一次调用 hide 之前不会隐藏。

【解决方案3】：

您可能想要使用 forkJoin 操作符，在这种情况下，当所有请求完成后您将进入此状态，然后您将隐藏您的加载微调器

【讨论】：

不幸的是，现实生活中并没有那么简单。我的 StackBlitz 代码是非常简化的示例。实际上，微调器在许多服务和组件中到处都显示和隐藏，我只是想确保微调器在最后一次调用 hide 之前不会隐藏。