javascript - 重新订阅 takeUntil/skipUntil

标签 javascript rxjs reactive-programming

以下代码定义了我想要的行为(有效)。仅当鼠标按下时才会触发 mousemove 事件。

Rx.Observable.fromEvent(window,"mouseup")
.subscribe( 
  () => {
      if(subscription)
         subscription.dispose();
  }
) 

Rx.Observable.fromEvent(window,"mousedown")
.subscribe(
  () => {
      subscription = Rx.Observable.fromEvent(window,"mousemove")
                     .subscribe(
                       (event) => console.log(event)
                     )
  }
) 

我想使用 takeUntil/skipUntil 运算符重写它。但这失败了:

let fs =  [
  (e) => console.log(e),
  (err) => console.log(err),
  () => {
      console.log('done')  
      source.subscribe(...fs);
  }
 ];

let getDown = () => Rx.Observable.fromEvent(document,"mousedown");
let getUp = () => Rx.Observable.fromEvent(document,"mouseup");

let source = Rx.Observable.fromEvent(document,"mousemove")
.skipUntil(getDown())
.takeUntil(getUp());

source.subscribe(
   ...fs
)

我该怎么做?谢谢!

最佳答案

这个问题通常通过将触发流的每个元素投影到所需的源流然后将其展平(通常使用 switchMap 来实现)来解决。在这种情况下,您希望将下跌预测为上涨。像这样:

const source = getDown().switchMap(() => Rx.Observable.fromEvent(document, "mousemove").takeUntil(getUp());

关于javascript - 重新订阅 takeUntil/skipUntil,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45264019/

相关文章:

javascript - jQuery 跨域错误

javascript - 为什么 TypeError : document. getElementById() 为 null

带有 Observable 的 Angular *ngif 和来自异步调用的数据

angular - 将管道添加到 Angular2 中的 formControlName

swift - 响应式设计 : throw vs. 发布错误

javascript - 即使使用 'load',div 也不会重新加载更改的内容

javascript - 在 express handlebars 中配置文件扩展名

angular - subscribe 做什么,它与 Observable 有什么关系?

rxjs - 如何将 useReducer 和 rxjs 与 React hooks 一起使用?

javascript - 使用 FRP 管理状态