博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[RxJS] Sharing Streams with Share
阅读量:7010 次
发布时间:2019-06-28

本文共 3208 字,大约阅读时间需要 10 分钟。

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 inputrunningGame$  .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 inputrunningGame$  .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')    );

 

转载地址:http://pmttl.baihongyu.com/

你可能感兴趣的文章
Euler 今日问世!国内首个工业级的图深度学习开源框架,阿里妈妈造
查看>>
是时候了解下Travis CI是什么了
查看>>
什么是数据库范式,是否应该严格遵守范式,什么情况下应该不遵守范式?
查看>>
LogParser v0.8.0 发布:一个用于定期增量式解析 Scrapy 爬虫日志的 Python 库
查看>>
MacOS安装git
查看>>
NEO改进协议提案6(NEP-6)
查看>>
iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码
查看>>
webapp字号大小跟随系统字号大小缩放
查看>>
[LeetCode] 430. Flatten a Multilevel Doubly Linked List
查看>>
常用布局
查看>>
交互式数据可视化-D3.js(四)形状生成器
查看>>
浅谈easy-mock 最好的备胎没有之一
查看>>
ES学习笔记(6)--数字操作
查看>>
数据上报分析一
查看>>
Vue.js 3.0 新特性预览
查看>>
什么是Jython?
查看>>
实现前后端分离的心得
查看>>
LeetCode 144 ——二叉树的前序遍历
查看>>
Windows上的Redis
查看>>
nginx系列2----从源码安装nginx和echo-nginx-module模块
查看>>