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. .NET中使用GridView控件输入数据时出现“ Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index"的问题

    在.NET中使用GridView控件的在线编辑数据时,出现了“ Index was out of range. Must be non-negative and less than the size ...

  2. log4net截取配置错误信息,(验证配置信息是否配置正确)

    在</system.web>之后 <!--log4错误日志配置:开始--> <system.diagnostics> <trace autoflush=&qu ...

  3. 修改Sharepoint 文档库列表点击Excel文件默认跳转到Excel Service服务 xlviewer.aspx页面

    在Sharepoint 文档库中,当点击库中的一个Excel文件时,Sharepoint默认为转跳到Excel Services上,无论是Sharepoint 的是否开启了Excel Service, ...

  4. oracle 查询前一小时、一天、一个月、一年的数据

    查询一小时 select concat(to_char(sysdate,'yyyy-mm-dd ')||(to_char(sysdate,'hh24')-1),':00:00') start_time ...

  5. WebBrowser.ExecWB方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 《Hadoop权威》学习笔记四:Hadoop的I/O

    一.数据完整性   二.压缩   三.序列化 基本概念 序列化指的是将结构化对象转化为字节流以便于通过网络进行传输或写入持久化存储的过程 反序列化指的是将字节流转为一系列结构化对象的过程. 进程间通信 ...

  7. QQ在线客服

    css代码: .float0831 { POSITION: fixed; TOP: 180px; RIGHT: 1px; _position: absolute } .float0831 A { CO ...

  8. linux 下编译安装php

    系统环境: CentOS 6.5 x86_64 下载 PHP 源码包 # wget http://cn2.php.net/distributions/php-5.5.9.tar.bz2 # tar x ...

  9. Tr A(HDU 1575 快速矩阵幂模板)

    Tr A Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  10. RichTextBox控件日常使用集合

    1.RichTextBox控件自动滚动到底部 richTextBox1.ScrollToCaret(); //将控件的内容滚动到当前光标位置