A stream will run with each new subscription added to it. This lesson shows the benefits of using share so that the same stream can be shared across multiple subscriptions.

const timer$ = starters$
.switchMap(intervalActions)
.startWith(data)
.scan((acc, curr)=> curr(acc)) timer$
.do((x)=> console.log(x))
.takeWhile((data)=> data.count <= 3)
.withLatestFrom(
input$.do((x)=> console.log(x)),
(timer, input)=> ({count: timer.count, text: input})
)
.filter((data)=> data.count === parseInt(data.text))
.reduce((acc, curr)=> acc + 1, 0)
.repeat()
.subscribe(
(x)=> document.querySelector('#score').innerHTML = `
${x}
`,
err=> console.log(err),
()=> console.log('complete')
);

Current code has a problem every time we type in the input, we need to click delete keyborad to delete the input. This is not conveninet.

So what we want is every time when the code check whether the value match, then we clean the input:

const runningGame$ = timer$
.do((x)=> console.log(x))
.takeWhile((data)=> data.count <= 3)
.withLatestFrom(
input$.do((x)=> console.log(x)),
(timer, input)=> ({count: timer.count, text: input})
); runningGame$
.subscribe( (x) => input.value = ""); runningGame$
.filter((data)=> data.count === parseInt(data.text))
.reduce((acc, curr)=> acc + 1, 0)
.repeat()
.subscribe(
(x)=> document.querySelector('#score').innerHTML = `
${x}
`,
err=> console.log(err),
()=> console.log('complete')
);

So we split the code and add another subscribe to clean the input, but now the problem is everytime it console log twice. This is because we have two subscribe on the runningGame$.

TO solve this problem, we need to share() the stream:

const runnintGame$ = timer$
.do((x)=> console.log(x))
.takeWhile((data)=> data.count <= 3)
.withLatestFrom(
input$.do((x)=> console.log(x)),
(timer, input)=> ({count: timer.count, text: input})
)
.share();

Now it only log out once, but it doesn't clean the input when we click start again. THis is because we only repeat() this part of code:

 runningGame$
.filter((data)=> data.count === parseInt(data.text))
.reduce((acc, curr)=> acc + 1, 0)
.repeat()

What we need to do is also make runningGame$ (clean the input) stream repeat itself:

// To clean the input
runningGame$
.repeat()
.subscribe( (x) => input.value = "");

----------------------------

Code:

const timer$ = starters$
.switchMap(intervalActions)
.startWith(data)
.scan((acc, curr)=> curr(acc)) const runningGame$ = timer$
.do((x)=> console.log(x))
.takeWhile((data)=> data.count <= 3)
.withLatestFrom(
input$.do((x)=> console.log(x)),
(timer, input)=> ({count: timer.count, text: input})
)
.share(); // To clean the input
runningGame$
.repeat()
.subscribe( (x) => input.value = ""); runningGame$
.filter((data)=> data.count === parseInt(data.text))
.reduce((acc, curr)=> acc + 1, 0)
.repeat()
.subscribe(
(x)=> document.querySelector('#score').innerHTML = `
${x}
`,
err=> console.log(err),
()=> console.log('complete')
);

[RxJS] Sharing Streams with Share的更多相关文章

  1. [RxJS] Combining streams in RxJS

    Source: Link We will looking some opreators for combining stream in RxJS: merge combineLatest withLa ...

  2. [RxJS] Aggregating Streams With Reduce And Scan using RxJS

    What is the RxJS equivalent of Array reduce? What if I want to emit my reduced or aggregated value a ...

  3. [RxJS] Combining Streams with CombineLatest

    Two streams often need to work together to produce the values you’ll need. This lesson shows how to ...

  4. [RxJS] Hot Observable, by .share()

    .share() is an alias for .publish().refCount(). So if the source is not yet completed, no matter how ...

  5. RH253读书笔记(5)-Lab 5 Network File Sharing Services

    Lab 5 Network File Sharing Services Goal: Share file or printer resources with FTP, NFS and Samba Se ...

  6. Separate code and data contexts: an architectural approach to virtual text sharing

    The present invention provides a processor including a core unit for processing requests from at lea ...

  7. Methods and systems for sharing common job information

    Apparatus and methods are provided for utilizing a plurality of processing units. A method comprises ...

  8. 说说Golang的使用心得

    13年上半年接触了Golang,对Golang十分喜爱.现在是2015年,离春节还有几天,从开始学习到现在的一年半时间里,前前后后也用Golang写了些代码,其中包括业余时间的,也有产品项目中的.一直 ...

  9. theano学习

    import numpy import theano.tensor as T from theano import function x = T.dscalar('x') y = T.dscalar( ...

随机推荐

  1. NS2仿真:使用NS仿真软件模拟简单网络模型

    NS2仿真实验报告1 实验名称:使用NS仿真软件模拟简单网络模型 实验日期:2015年3月2日~2015年3月7日 实验报告日期:2015年3月8日 一.实验环境(网络平台,操作系统,网络拓扑图) 运 ...

  2. 自定义key解决zabbix端口监听取值不准确的问题

         今天有一个朋友问到我一个关于zabbix监控tcp端口的问题,明明端口在监听,但是通过net.tcp,listen取值取到的却是0. 经过简单的goole发现这已经是一个历史悠久的问题: 问 ...

  3. ValidateBox( 验证框) 组件

    本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于Tooltip(提示框)组件. 一. 加载方式//class 加载方式<input id=&quo ...

  4. 当setTimeout遇到闭包

    1: function myTest(){ for(var i=0; i< 5; i++){ setTimeout(console.log(i), 0); } } myTest(); 或者比较正 ...

  5. C复习手记(Day2)

    1.共用体 共用体是一种特殊的结构,允许在相同的位置存储不同的数据类型.可以定义一个带有多成员的共同体,但是任何时候只能有一个成员带有值. 定义共用体: union Data { int i; flo ...

  6. IIS上部署网站404错误

    新装的系统上部署.net网站遇到403.404错误,可能原因记录: 1.应用程序池选择错误,一般选择4.0的 2.ASP.NET4.0应用程序池未安装(一般先安装了framework4.0,后安装ii ...

  7. MySql多条SQL语句的批量处理

    pstmt= conn.prepareStatement(sql); for(int i=0;i<500;i++) { //准备sql语句 pstmt.setString(1, "tt ...

  8. 《APUE》读书笔记第十三章-守护进程

    守护进程 守护进程是生存期较长的一种进程,它们常常在系统自举时启动,仅在系统关闭时才终止.因为它们没有控制终端,所以说它们是在后台运行的.UNIX系统由很多守护进程,它们执行日常事务活动. 本章主要介 ...

  9. dubbo No provider available for the service com.alibaba.dubbo.monitor.MonitorService from registry

    No provider available for the service com.alibaba.dubbo.monitor.MonitorService from registry http:// ...

  10. Scala学习笔记--特质trait

    http://outofmemory.cn/scala/scala-trait-introduce-and-example 与Java相似之处 Scala类型系统的基础部分是与Java非常相像的.Sc ...