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));

[RxJS] Displaying Initial Data with StartWith的更多相关文章

  1. Define the Data Model and Set the Initial Data 定义数据模型并设置初始数据

    This topic describes how to define the business model and the business logic for WinForms and ASP.NE ...

  2. [rxjs] Async, handle data over time

    If I have an array, and I want to apply filter, map, forEach to it. let Observable = Rx.Observable; ...

  3. How to: Supply Initial Data for the Entity Framework Data Model 如何:为EF数据模型提供初始数据

    After you have introduced a data model, you may need to have the application populate the database w ...

  4. Supply Initial Data提供初始数据 (EF)

    Open the Updater.cs (Updater.vb) file, located in the MySolution.Module project's Database Update fo ...

  5. 运用模型绑定和web窗体显示和检索数据(Retrieving and displaying data with model binding and web forms)

    原文 http://www.asp.net/web-forms/overview/presenting-and-managing-data/model-binding/retrieving-data ...

  6. rxjs与vue

    原创文章,转载请注明出处 使用vue-rx插件将vue和rxjs联系起来 在main.js中将vue-rx注入vue中 import Vue from 'vue' import App from '. ...

  7. TYPES、DATA、TYPE、LIKE、CONSTANTS、STATICS、TABLES

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. [Redux] Fetching Data on Route Change

    We will learn how to fire up an async request when the route changes. A mock server data: /** /api/i ...

  9. Action、Category、Data、Extras知识具体解释

    开头 Intent作为联系各Activity之间的纽带,其作用并不仅仅仅仅限于简单的数据传递.通过其自带的属性,事实上能够方便的完毕非常多较为复杂的操作.比如直接调用拨号功能.直接自己主动调用合适的程 ...

随机推荐

  1. EJB开发第一个无状态会话bean、开发EJBclient

    开发第一个无状态会话bean EJB中的三中bean: 会话Bean(Session Bean) 负责与client交互,是编写业务逻辑的地方.在会话bean中能够通过JDBC直接操作数据库.但大多数 ...

  2. CH BR8(小学生放假了-clock()/CLOCKS_PER_SEC-斜率优化常错集锦)

    小学生放假了 总时限 26s 内存限制 256MB 出题人 zsyzzsoft 提交情况 16/150 初始分值 1500 锁定情况 背景 我们能见到的最可怕的事情,莫过于小学生放假了! 描述 小学生 ...

  3. Qt QString to char*

    QString转换成char * 的时候,一定要定义一个QBateArray的变量.不能连写 How can I convert a QString to char* and vice versa ? ...

  4. AIX-df命令

    df 命令显示文件系统的总空间和可用空间信息.FileSystem 参数指定文件系统驻留的设备的名称,文件系统的安装目录或文件系统的相对路径名.File 参数指定非安装点的文件或目录.如果指定 Fil ...

  5. IIS7 常用模块介绍说明

    1.1.0   IIS常用的功能模块介绍: 1)         静态内容:可发布静态 Web 文件格式,比如 HTML 页面和图像文件. 2)         默认文档:允许您配置当用户未在 URL ...

  6. vim中systemverilog的高亮显示

    vim中systemverilog的高亮显示 Linux中的vim显示systemverilog语法高亮 windows中的gvim显示systemverilog语法高亮 Linux系统 查看打开vi ...

  7. Asp.net - The type or namespace name 'App_Code' does not exist in the namespace 'xxx' (are you missing an assembly reference?)

    我在 项目 下面创建一个 App_Code的文件夹,然后在其下创建自定义的类,但是当我在该项目下别的地方使用时报错: The type or namespace name 'App_Code' doe ...

  8. oracle 优化 —— 分区表

    一.分区表简介 分区表类型:[范围分区].[列表分区] [hash分区]    [这些分区的组合分区] 范围分区:以某一个范围进行分区.eg:时间段划分. 列表分区:以某一些几个值进行分区.eg:地区 ...

  9. JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com",&quo ...

  10. (原)torch使用caffe时,提示CUDNN_STATUS_EXECUTION_FAILED

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6230227.html 提前说明:此文不能真正解决该问题,具体原因我也不知道... 以前使用某台电脑A上 ...