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. win32线程池代码(WinApi/C++)

    win32线程池代码(WinApi/C++) 健壮, 高效,易用,易于扩, 可用于任何C++编译器 //说明, 这段代码我用了很久, 我删除了自动调整规模的代码(因为他还不成熟)/********** ...

  2. 关于在xp(sp3 专业版)下安装sql2005开发版图解

    今天我在xp上安装sql2005,搞了一上午也没有搞好,最终自己还是搞好,也装了,也卸载了!这里就总结一下,让以后用sql2005的朋友能有个参考!我也是自己在GOOGLE上搜索的! 转自:http: ...

  3. 【转载】Python编程中常用的12种基础知识总结

    Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...

  4. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  5. WPF资源字典使用

    资源字典出现的初衷就在于可以实现多个项目之间的共享资源,资源字典只是一个简单的XAML文档,该文档除了存储希望使用的资源之外,不做任何其它的事情. 1.  创建资源字典 创建资源字典的过程比较简单,只 ...

  6. SQL从入门到基础 - 06 限制结果集范围

    一.限制结果集行数 1. Select top 5* from T_Employee order by FSalary DESC 2. (*)检索按照工资从高到低排序检索从第六名开始一共四个人的信息: ...

  7. C3P0连接池配置方式

    c3p0的配置方式分为三种,分别是 1.setters一个个地设置各个配置项 2.类路径下提供一个c3p0.properties文件 3.类路径下提供一个c3p0-config.xml文件 1.set ...

  8. JDK + Tomcat 安装配置

    学习Java 开发的第一步就是配置环境,今天第一次配置,把过程记录下以备后用. 一.下载JDK.Tomcat JDK:http://www.oracle.com/technetwork/java/ja ...

  9. amchart

    amchart能够根据提供的数据便捷的生成好看的图标,曾在项目中遇到使用falsh版以支持对js支持不好的低版本浏览器,但是现在官网上都是js版本的,flash版的文档都没有,搜索结果一般都是链接到博 ...

  10. ROBOTS.TXT屏蔽笔记、代码、示例大全

    自己网站的ROBOTS.TXT屏蔽的记录,以及一些代码和示例: 屏蔽后台目录,为了安全,做双层管理后台目录/a/xxxx/,蜘蛛屏蔽/a/,既不透露后台路径,也屏蔽蜘蛛爬后台目录 缓存,阻止蜘蛛爬静态 ...