zoukankan      html  css  js  c++  java
  • [RxJS] Combining Streams with CombineLatest

    Two streams often need to work together to produce the values you’ll need. This lesson shows how to use an input stream and an interval stream together and push an object with both values through the stream.

    const Observable = Rx.Observable;
    
    const startButton = document.querySelector('#start');
    const halfButton = document.querySelector('#half');
    const quarterButton = document.querySelector('#quarter');
    const input = document.querySelector("#input");
    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 half$ = Observable.fromEvent(halfButton, 'click');
    const quarter$ = Observable.fromEvent(quarterButton, 'click');
    const stop$ = Observable.fromEvent(stopButton, 'click');
    const reset$ = Observable.fromEvent(resetButton, 'click');
    const starters$ =  Observable.merge(
        start$.mapTo(1000),
        half$.mapTo(500),
        quarter$.mapTo(250)
     );
    const intervalActions = (time) => {
          return Observable.merge(
            Observable.interval(time)
            .takeUntil(stop$)
            .mapTo(inc),
            reset$.mapTo(reset)
          )
        };
    const timer$ = starters$
     .switchMap(intervalActions)
     .startWith(data)
     .scan( (acc, curr) => curr(acc));
    const input$ = Observable.fromEvent(input, "input")
      .map(ev=>ev.target.value);
    
    Observable.combineLatest(
      timer$,
      input$
    )
    // We will get an array combineLatest
    .map((array)=>{
      return {count: array[0].count, input: array[1]}
    })
    .subscribe(x => console.log(x))

    They last param of combineLatest is a result function, which can parse the result in the fucntion:

    Observable.combineLatest(
      timer$,
      input$,
      (timer, input)=>{
         return {count: timer.count, input}
      }
    )
    .subscribe(x => console.log(x))
  • 相关阅读:
    poj 4005 Moles
    牛客 2C 圈圈
    牛客 2B 树 (组合计数)
    AC日记——校门外的树(增强版) 洛谷 P1276
    AC日记——寻找道路 洛谷 P2296
    AC日记——挤牛奶 洛谷 P1204
    AC日记——最大数 洛谷 P1198 [JSOI2008]
    AC日记——中位数 洛谷 P1168
    AC日记——校门外的树 洛谷 P1047
    AC日记——约瑟夫问题 codevs 1282
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5264169.html
Copyright © 2011-2022 走看看