RxJS模拟App退出功能，两秒内两次点击则退出

Question

问题描述

使用RxJS来模拟App的连续两次点击退出功能
使用了两种方法，都不是很满意，有没有更好的办法？

相关代码

方法一：使用bufferTime操作符
出现的问题是，bufferTime的缓冲时间不是以点击为起始，可能导致点击一次之后立刻发出值

click$.pipe(
  bufferTime(2000, null, 2),
  filter(v => v.length >= 2)
).subscribe(() => console.log('success'))

---

方法二： 使用concatMap处理点击事件，并给第一次点击做节流
出现的问题是，'succsss'之后在节流时间里无法响应点击事件

click$.pipe(
  throttleTime(2000),
  tap(() => console.log('one')),
  concatMap(() => click$.pipe(
    tap(() => console.log('two')),
    take(1),
    takeUntil(of(1).pipe(delay(2000)))
  ))
).subscribe(v => console.log('success'))

---

最终实现见楼下我的补充

Answer 1

最终实现：

const btn = document.getElementById('btn')
const click$ = fromEvent(btn, 'click')

const trigger$ = click$.pipe(
  exhaustMap(() => {
    console.log('tap')
    return merge(click$, timer(2000)).pipe(take(1))
  })
)
  
click$.pipe(
  buffer(trigger$),
  filter(v => v.length > 1)
).subscribe(v => console.log(v))

tap部分可以实现“再按一次退出”之类的提示

Answer 2

click$.buffer(() => click$.debounce(2000)).map(_ => _.length).filter(_ => _ === 2).subscribe(() => {
  console.log('double clicked !');
})

Answer 3

我觉得用buffer可以：

let respondTime = Observable.interval(2000)
click$.pipe(
    buffer(respondTime),
    filter(myClicks => myClicks.length == 2)
).subscribe(myClicks => {
    ...
})

把点击缓冲起来，在规定时间内发出，次数等于2 就是了。

Answer 4

这个一般用会自身作为触发。如果 click$ 不是subject 的话可以用 click$.share()。

补充：看完描述我觉得你没有说明 success 之后如何影响普通鼠标点击。

如果这个 success 并不影响普通点击，那么其它地方再 subscribe click$ 处理普通点击即可。

click$.pipe(
  buffer(() =>click$.debounceTime(2000)),
  filter(group => group.length >= 2)
).subscribe(v => console.log('success'))

Answer 5

click$
  .map(t => Date.now())
  .scan((prev, cur) => ({
    cur,
    result: cur - prev.cur
  }), {
    cur: 0
  })
  .map(t => t.result / 1000)
  .filter(t => t < 2)
  .take(1)
  .subscribe(t => {
    console.log(t)
  });