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))
  • 相关阅读:
    2020软件工程最后一次作业 it
    javaArrayList it
    js二进制数据转图片 it
    002addTwoNumbers it
    1.1选择select it
    js保存图片至本地 it
    npm ERR! code E404 it
    2020软件工程第三次作业 it
    2020软件工程第二次作业 it
    react打包后找不到静态文件 it
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5264169.html
Copyright © 2011-2022 走看看