zoukankan      html  css  js  c++  java
  • [RxJS] Handling Multiple Streams with Merge

    You often need to handle multiple user interactions set to different streams. This lesson shows hows Observable.merge behaves like a "logical OR" to have your stream handle one interaction OR another.

    After click the start buttion, we wnat the logic that, click stop, it remember the current state, then if click start, continue with the current state.

    If click reset, then it restart from 0;

    const Observable = Rx.Observable;
    
    const startButton = document.querySelector("#start");
    const stopButton = document.querySelector("#stop");
    const resetButton = document.querySelector("#reset");
    
    const data = {count: 0};
    const inc = (acc) => ({count: acc.count + 1});
    const reset = (acc) => data;
    
    const start$ = Observable.fromEvent(startButton, 'click');
    const stop$ = Observable.fromEvent(stopButton, 'click');
    const reset$ = Observable.fromEvent(resetButton, 'click'); 
    const interval$ = Observable.interval(500);
    const intervalThatStop$ = interval$.takeUntil(stop$);
    const incOrReset$ = Observable.merge( intervalThatStop$.mapTo(inc), reset$.mapTo(reset) ); start$ .switchMapTo(incOrReset$) .startWith(data) .scan( (acc, curr) => curr(acc)) .subscribe( (x) => console.log(x))
  • 相关阅读:
    canvas背景粒子动态变化动画
    点击屏幕弹出心形效果
    前端图片的性能优化
    vue的computed和method的区别
    es6的...
    命名路由和命名视图
    编程式路由
    [思维]蚂蚁感冒
    [模板]前缀树 / 字典树及应用
    [模板]三分搜索
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5264111.html
Copyright © 2011-2022 走看看