我如何使用 rxjs 忽略第二个、第三个按钮单击，直到我的第一个按钮单击过程完成答案

【问题标题】：How do i use rxjs to ignore second,third button click till my first button click process is complete我如何使用 rxjs 忽略第二个、第三个按钮单击，直到我的第一个按钮单击过程完成
【发布时间】：2020-07-18 18:15:02
【问题描述】：

我的 HTML 代码如下：

button (click)="doFunc()"

在我的 ts 文件中，我有以下内容：

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

当我单击该按钮两次时，会进行两次服务调用。我不希望这种情况发生。相反，应忽略后续点击。

我怎样才能做到这一点？

【问题讨论】：

标签： rxjs6 rxjs-observables

【解决方案1】：

请先订阅。 https://rxmarbles.com/#first

像这样

doFunc(){ 

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

}

【讨论】：

我实现了上面的，问题是在on按钮上它执行一次，当我在一段时间后再次点击时没有调用这个函数
啊。在您最初的问题中，您说您只希望忽略第一次点击和后续点击。因此，您需要做的是在异步功能完成后销毁并重新创建您的订阅。或者使用“去抖动”而不是“第一”。要使用 debounce，您需要与您的 asyncFunction 共享一个 observable。并且您的函数必须在完成运行后触发一个事件。
另外，如果您在异步功能运行时禁用按钮并再次重新启用它，这可能是一个更清洁的解决方案。这样您就不会收到任何点击事件。
这里是 debounce 运算符的一些参考。 rxjs-dev.firebaseapp.com/api/operators/debounce。和rxmarbles.com/#debounce

【解决方案2】：

我会尝试在你的状态管理器中的函数调用之前设置一个标志（如果你正在使用一个）来确定调用是否成功。然后在您的异步函数中，如果设置了该标志，则拒绝继续。它看起来有点像这样

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()

【讨论】：