Как заблокировать пользовательский интерфейс до завершения всех ожидающих операций?

Question

У меня есть Angular 8 веб-приложение с NgxSpinner . Я использую его для блокировки пользовательского интерфейса, когда выполняется какой-то длительный процесс, чтобы предотвратить взаимодействие пользователей со сложными формами, в то время как некоторые части еще не полностью загружены.

Проблема в том, что NgxSpinner сразу скрывается, если какой-то процесс вызывает hide, независимо от того, существует ли еще один процесс с его собственной парой вызовов show/hide. Таким образом, веб-страница разблокируется слишком рано, когда какой-либо более короткий процесс был завершен, и вызвал spinner.hide().

Вот пример Stackblitz .

Как сделать Я заставляю NgxSpinner ждать, пока последние hide совпадут со всеми show вызовами?

PS Кажется, проблема со многими библиотеками блоков пользовательского интерфейса, которые я пробовал - они просто не учитывают для параллельных процессов, вызывающих show/hide несколько раз.

Answer 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 .

Answer 2

Возможно, вы захотите использовать оператор forkJoin, в этом случае вы войдете в это состояние, когда все запросы будут выполнены, а затем скроете свой загрузочный счетчик

Answer 3

вы можете использовать Promise. Каждая функция Process возвращает обещание, и затем вы можете использовать функцию 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();
})