Как использовать rx js, чтобы игнорировать второе, третье нажатие кнопки, пока мой первый процесс нажатия кнопки не будет завершен

Question

My HTML имеет следующий код:

button (click)="doFunc()" 

В моем TS-файле у меня есть следующее:

doFunc(){
    this.service.executeAFuncWhichIsAsynchronous().subscribe(x => { updateMyUi(); });
}

Когда я дважды нажимаю кнопку, два служебных вызова сделаны. Я не хочу, чтобы это случилось. Вместо этого последующие клики следует игнорировать.

Как я могу выполнить sh это?

Answer 1

Просто подпишитесь на первую. https://rxmarbles.com/#first

Как это

doFunc(){ 

  this
    .service
    .executeAFuncWhichIsAsynchronous()
    .first()
    .subscribe(x => updateMyUi(x)); 

}

Answer 2

Я бы попытался установить флаг перед вызовом функции в вашем менеджере состояний (если вы его используете), чтобы определить, прошел ли вызов. Затем в вашей функции asyn c, если этот флаг установлен, отказаться от продолжения. Это будет выглядеть примерно так

import state from './state'

function someAsyncFunc()
{
  if (state.executing) {return}
  else
  {
   state.executing = true;
   setTimeout(function(){ console.log("got here");state.executing=false;return; }, 3000);
  }
}

async function doFunc()
{
  await someAsyncFunc();
}

doFunc()
doFunc()
doFunc()