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))
  • 相关阅读:
    学习小结(8)
    内置函数补充(zip map filter)
    网络编程(爬虫,接口和requests的模块应用)及网络测接口
    Selenium彩蛋篇-Css Selector使用方法
    Selenium彩蛋篇-Xpath使用方法
    Selenium-WebDriverApi接口详解
    Selenium-Switch与SelectApi接口详解
    Selenium-常问面试题
    下拉框处理(select)
    Selenium之前世今生
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5264169.html
Copyright © 2011-2022 走看看