[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));
[RxJS] Displaying Initial Data with StartWith的更多相关文章
- 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 ...
- [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; ...
- 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 ...
- Supply Initial Data提供初始数据 (EF)
Open the Updater.cs (Updater.vb) file, located in the MySolution.Module project's Database Update fo ...
- 运用模型绑定和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 ...
- rxjs与vue
原创文章,转载请注明出处 使用vue-rx插件将vue和rxjs联系起来 在main.js中将vue-rx注入vue中 import Vue from 'vue' import App from '. ...
- TYPES、DATA、TYPE、LIKE、CONSTANTS、STATICS、TABLES
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [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 ...
- Action、Category、Data、Extras知识具体解释
开头 Intent作为联系各Activity之间的纽带,其作用并不仅仅仅仅限于简单的数据传递.通过其自带的属性,事实上能够方便的完毕非常多较为复杂的操作.比如直接调用拨号功能.直接自己主动调用合适的程 ...
随机推荐
- EJB开发第一个无状态会话bean、开发EJBclient
开发第一个无状态会话bean EJB中的三中bean: 会话Bean(Session Bean) 负责与client交互,是编写业务逻辑的地方.在会话bean中能够通过JDBC直接操作数据库.但大多数 ...
- CH BR8(小学生放假了-clock()/CLOCKS_PER_SEC-斜率优化常错集锦)
小学生放假了 总时限 26s 内存限制 256MB 出题人 zsyzzsoft 提交情况 16/150 初始分值 1500 锁定情况 背景 我们能见到的最可怕的事情,莫过于小学生放假了! 描述 小学生 ...
- Qt QString to char*
QString转换成char * 的时候,一定要定义一个QBateArray的变量.不能连写 How can I convert a QString to char* and vice versa ? ...
- AIX-df命令
df 命令显示文件系统的总空间和可用空间信息.FileSystem 参数指定文件系统驻留的设备的名称,文件系统的安装目录或文件系统的相对路径名.File 参数指定非安装点的文件或目录.如果指定 Fil ...
- IIS7 常用模块介绍说明
1.1.0 IIS常用的功能模块介绍: 1) 静态内容:可发布静态 Web 文件格式,比如 HTML 页面和图像文件. 2) 默认文档:允许您配置当用户未在 URL ...
- vim中systemverilog的高亮显示
vim中systemverilog的高亮显示 Linux中的vim显示systemverilog语法高亮 windows中的gvim显示systemverilog语法高亮 Linux系统 查看打开vi ...
- 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 ...
- oracle 优化 —— 分区表
一.分区表简介 分区表类型:[范围分区].[列表分区] [hash分区] [这些分区的组合分区] 范围分区:以某一个范围进行分区.eg:时间段划分. 列表分区:以某一些几个值进行分区.eg:地区 ...
- JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com",&quo ...
- (原)torch使用caffe时,提示CUDNN_STATUS_EXECUTION_FAILED
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6230227.html 提前说明:此文不能真正解决该问题,具体原因我也不知道... 以前使用某台电脑A上 ...