[RxJS] Sharing Streams with Share
2016-03-14 05:44
561 查看
A stream will run with each new subscription added to it. This lesson shows the benefits of using
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:
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:
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:
What we need to do is also make runningGame$ (clean the input) stream repeat itself:
----------------------------
Code:
shareso 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')
);
相关文章推荐
- JS表格元素排序
- 《JavaScript语言精粹》笔记
- Javascript猜数字游戏
- JSP自定义标签简单入门教程
- javascript实现PC网页里的拖拽效果
- javascript实现数组去重的多种方法
- 使用javascript插入样式
- 基于javascript html5实现3D翻书特效
- 原生javascript+css3编写的3D魔方动画旋扭特效
- javascript复制数组
- 说说JSON和JSONP,也许你会豁然开朗
- 深入理解JavaScript系列
- JavaScript 小技巧
- JS处理事件小技巧
- JavaScript基础篇(三)— — DOM事件揭秘
- 浅谈JS代码和OC代码的交互
- (转)js闭包初入门
- JavaScript基础篇(二)— — DOM事件基础
- html JS
- JSP的一些笔记