javascript - 使用 RxJs 单击和双击的单独操作

Question

我对 RxJs 有疑问。

我需要在单击一次按钮时在 console.log 中记录一条消息，而在我单击按钮两次时需要记录不同的消息。问题是:

• 开始时如果我第一次点击 - 没有任何反应 - 错误(我应该看到第一条消息“一次点击”)

• 然后，如果我点击按钮然后(一秒钟后)我再次点击，第二次点击我可以看到两条消息 - 错误(每次操作我应该只看到一条消息)

• 当我点击按钮时，稍等片刻，再次点击，稍等片刻，然后再次点击，然后在最后一次点击时，我将在 console.log 中看到三条消息 - 错误(每次操作我应该只看到一条消息)
• 之后，如果我点击两次(双击)，我将看到五条双击消息，一次点击一条消息 - 错误(我应该只看到一条“双击”消息)

我想要的是:

• 如果我点击一次，我只需要看到一条消息(“一次点击”)
• 如果我点击两次 (doubleclick)，我仍然只需要看到一条消息 ('double click')
• 如果我点击两次以上 - 没有任何反应

有什么帮助吗？

check hear for examples

Answer 1

一个非常简单的答案(不使用任何可观察对象)是使用 setTimeout() 并检查每次点击是否已经设置了超时，如果是这样，您就知道这是第二次点击给定时间窗口(双击)，如果没有，则为第一次单击。如果超时到期，您知道这只是一次单击，如下所示:

Updated StackBlitz

// have a timer that will persist between function calls
private clickTimeout = null;
public test(event): void {
  // if timeout exists, we know it's a second click within the timeout duration
  // AKA double click
  if (this.clickTimeout) {
    // first, clear the timeout to stop it from completing
    clearTimeout(this.clickTimeout);
    // set to null to reset
    this.clickTimeout = null;
    // do whatever you want on double click
    console.log("double!");
  } else {
  // if timeout doesn't exist, we know it's first click
    this.clickTimeout = setTimeout(() => {
      // if timeout expires, we know second click was not handled within time window
      // so we can treat it as a single click
      // first, reset the timeout
      this.clickTimeout = null;
      // do whatever you want on single click
      console.log("one click");
    }, 400);
  }
}

编辑

我错过了关于忽略超过 2 次点击的部分。并没有多做多少工作，但是为了能够重用代码，我把它分解了一些，所以看起来多了很多。不管怎样，要忽略 3 次以上的点击，它看起来像下面这样:

// count the clicks
private clicks = 0;
private clickTimeout = null;
public test(event): void {
  this.clicks++;
  if (this.clickTimeout) {
    // if is double click, set the timeout to handle double click
    if (this.clicks <= 2) {
      this.setClickTimeout(this.handleDoubleClick);
    } else {
    // otherwise, we are at 3+ clicks, use an empty callback to essentially do a "no op" when completed
      this.setClickTimeout(() => {});
    }
  } else {
    // if timeout doesn't exist, we know it's first click - treat as single click until further notice
    this.setClickTimeout(this.handleSingleClick);
  }
}
// sets the click timeout and takes a callback for what operations you want to complete when the
// click timeout completes
public setClickTimeout(cb) {
  // clear any existing timeout
  clearTimeout(this.clickTimeout);
  this.clickTimeout = setTimeout(() => {
    this.clickTimeout = null;
    this.clicks = 0;
    cb();
  }, 400);
}
public handleSingleClick() {
  console.log("one click");
}
public handleDoubleClick() {
  console.log("double!");
}