鍍金池/ 問答/Linux  網(wǎng)絡(luò)安全  HTML/ RxJS模擬App退出功能，兩秒內(nèi)兩次點擊則退出

RxJS模擬App退出功能，兩秒內(nèi)兩次點擊則退出

問題描述

使用RxJS來模擬App的連續(xù)兩次點擊退出功能
使用了兩種方法，都不是很滿意，有沒有更好的辦法？

相關(guān)代碼

方法一：使用bufferTime操作符
出現(xiàn)的問題是，bufferTime的緩沖時間不是以點擊為起始，可能導(dǎo)致點擊一次之后立刻發(fā)出值

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

方法二： 使用concatMap處理點擊事件，并給第一次點擊做節(jié)流
出現(xiàn)的問題是，'succsss'之后在節(jié)流時間里無法響應(yīng)點擊事件

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

方法一我想改進為將點擊事件映射為新的流，在新的流里做bufferTime，但是由于新的流之間是互相獨立的而無法實現(xiàn)

回答
編輯回答
熊出沒

我覺得用buffer可以：

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

把點擊緩沖起來，在規(guī)定時間內(nèi)發(fā)出，次數(shù)等于2 就是了。

2017年4月3日 11:15
編輯回答
尛曖昧

找到好方法了
一個是自己記錄時間（咳咳咳 不是很好）

click$.pipe(
  map(() => new Date().getTime()),
  pairwise(),
  filter(e => e[1] - e[0] <= 2000)
).subscribe(v => console.log('success'))

一個是用timeInterval操作符

click$.pipe(
  timeInterval(),
  filter(i => i.interval < 2000)
).subscribe(() => console.log('success'))
2017年12月6日 19:08
編輯回答
乖乖噠

這個一般用會自身作為觸發(fā)。如果 click$ 不是subject 的話可以用 click$.share()。

補充：看完描述我覺得你沒有說明 success 之后如何影響普通鼠標(biāo)點擊。

如果這個 success 并不影響普通點擊，那么其它地方再 subscribe click$ 處理普通點擊即可。

click$.pipe(
  buffer(() =>click$.debounceTime(2000)),
  filter(group => group.length >= 2)
).subscribe(v => console.log('success'))
2018年4月3日 11:14
編輯回答
毀憶
click$.buffer(() => click$.debounce(2000)).map(_ => _.length).filter(_ => _ === 2).subscribe(() => {
  console.log('double clicked !');
})
2017年4月15日 23:47