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))
  • 相关阅读:
    第二阶段冲刺报告(三)
    第二阶段冲刺报告(二)
    第二阶段冲刺报告(一)
    课程改进意见
    用户体验
    返回一个二维整数数组中最大联通子数组的和
    《你的灯亮着吗》阅读笔记三 ——谁的问题
    《你的灯亮着吗》阅读笔记二 ——什么是真正的问题
    《你的灯亮着吗》阅读笔记一 —— 问题是什么?
    我爱淘冲刺阶段站立会议2每天任务6
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5264169.html
Copyright © 2011-2022 走看看