zoukankan      html  css  js  c++  java
  • [RxJS] Displaying Initial Data with StartWith

    You often need to render out data before you stream begins from a click or another user interaction. This lessons shows how to use startWith to set the initial output before you trigger your stream.

    const Observable = Rx.Observable;
    
    const startButton = document.querySelector('#start');
    const stopButton = document.querySelector('#stop');
    
    const start$ = Observable.fromEvent(startButton, 'click');
    const interval$ = Observable.interval(1000);
    const stop$ = Observable.fromEvent(stopButton, 'click');
    
    const intervalThatStops$ = interval$
        .takeUntil(stop$);
    
    const data = {count: 0};
    
    start$
        .switchMapTo(intervalThatStops$)
        .startWith(data)
        .scan( (acc) => {
            return Object.assign(acc, {count: acc.count + 1})
        })
        .subscribe((x)=> console.log(x));

    What startWith will do is, before you click the start button, it will set the initial value for scan(), and logout 0 on the screen. 

    Then when you click the start button, it will increase from 1 to .....

    So it means startWith actually will fire subscrie once.

    const Observable = Rx.Observable;
    
    const startButton = document.querySelector('#start');
    const stopButton = document.querySelector('#stop');
    
    const start$ = Observable.fromEvent(startButton, 'click');
    const interval$ = Observable.interval(1000);
    const stop$ = Observable.fromEvent(stopButton, 'click');
    
    const intervalThatStops$ = interval$
        .takeUntil(stop$);
    
    const inc = (acc) => ({count: acc.count + 1}); // one line arrow function only ruturn object need ()
    
    const data = {count: 0};
    
    start$
        .switchMapTo(intervalThatStops$)
        .startWith(data)
        .scan( inc )
        .subscribe((x)=> console.log(x));
  • 相关阅读:
    Ubuntu 14.04设置开机启动脚本的方法
    python 筛选
    分段压缩
    ubuntu 16.04 启用root用户方法
    Ubuntu 16.04 设置MySQL远程访问权限
    [分享]在ubuntu9.10下实现开机自动登录并运行自己的图形程序
    ubuntu live cd修复grub引导项
    安装dcm4chee-arc-light-5.4.1-mysql步骤
    数据库学习--wildfly配置postgreSQL数据源
    wildfly配置PostgreSQL数据源
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5258848.html
Copyright © 2011-2022 走看看