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

发布于 2022-09-07 23:15:00 字数 724 浏览 29 评论 0

问题描述

使用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'))

最终实现见楼下我的补充

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

流云如水 2022-09-14 23:15:00

最终实现:

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部分可以实现“再按一次退出”之类的提示

德意的啸 2022-09-14 23:15:00
click$.buffer(() => click$.debounce(2000)).map(_ => _.length).filter(_ => _ === 2).subscribe(() => {
  console.log('double clicked !');
})
凑诗 2022-09-14 23:15:00

我觉得用buffer可以:

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

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

戏蝶舞 2022-09-14 23:15:00

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

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

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

click$.pipe(
  buffer(() =>click$.debounceTime(2000)),
  filter(group => group.length >= 2)
).subscribe(v => console.log('success'))
甜`诱少女 2022-09-14 23:15:00
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)
  });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文