[RxJS] ReplaySubject with buffer
A BehaviorSubject can remember the latest value emitted, but what if we wanted Observer B to see all the previous values emitted in the past? We can't do that with BehaviorSubject, but there is ReplaySubject, which allows us to do that. This lessons teaches you everything you need to know about ReplaySubjects.
It is not good to cache all the value by using ReplaySubject, so we need to add cache logic for this.
The first parameter to the constructor of ReplaySubject takes a number that represents how many values we want to buffer:
var subject = new Rx.ReplaySubject(); // Buffer size of 2
subject.next();
subject.next();
subject.next();
subject.subscribe(function(n) {
console.log('Received value:', n);
}); /*
"Received value:"
3
"Received value:"
2
*/
The second parameter takes a number that represents the time in miliseconds during which we want to buffer values:
var subject = new Rx.ReplaySubject(null, ); // Buffer size of 200ms
setTimeout(function() { subject.next(); }, ); //350(subscribe time) - 200 (buffer time) > 100 --> not replay
setTimeout(function() { subject.next(); }, ); //350 - 200 < 200 --> replay
setTimeout(function() { subject.next(); }, ); //350 - 200 < 300 --> replay
setTimeout(function() {
subject.subscribe(function(n) {
console.log('Received value:', n);
});
subject.onNext();
}, ); /*
"Received value:"
2
"Received value:"
3
"Received value:"
4
*/
var subject = new Rx.ReplaySubject();
// new Rx.BehaviorSubject(0); var observerA = {
next: function (x) { console.log('A next ' + x); },
error: function (err) { console.log('A error ' + err); },
complete: function () { console.log('A done'); },
}; subject.subscribe(observerA);
console.log('observerA subscribed'); var observerB = {
next: function (x) { console.log('B next ' + x); },
error: function (err) { console.log('B error ' + err); },
complete: function () { console.log('B done'); },
}; setTimeout(() => subject.next(), );
setTimeout(() => subject.next(), );
setTimeout(() => subject.next(), );
setTimeout(() => subject.complete(), ); /*
----1---2---3--|
..1...2...3...
1,2,3|
*/ setTimeout(function () {
subject.subscribe(observerB);
console.log('observerB subscribed');
}, ); /*
"observerA subscribed"
"A next 1"
"A next 2"
"A next 3"
"A done"
"B next 1"
"B next 2"
"B next 3"
"B done"
"observerB subscribed"
*/
[RxJS] ReplaySubject with buffer的更多相关文章
- [RxJS] ReplaySubject
A ReplaySubject caches its values and re-emits them to any Observer that subscrubes late to it. Unli ...
- [RxJS] Transformation operator: buffer, bufferCount, bufferTime
This lesson will teach you about another horizontal combination operator: buffer and its variants. B ...
- RxJS库
介绍 RxJS是一个异步编程的库,同时它通过observable序列来实现基于事件的编程.它提供了一个核心的类型:Observable,几个辅助类型(Observer,Schedulers,Subje ...
- RxJS核心概念之Subjet在angular2+上的应用
Subject,在RxJS中是一类特殊的Observable(可观察对象),它可像多个Observer(观察者)推送值.每一个Subject也可以作为Observer(观察者) Subject同样也是 ...
- 使用 Rx 中预定义的 Subject
看到一幅有趣的关于 Rx 学习的图,想知道学习 Rx 的学习曲线?不,是峭壁! 我们可以直接通过 Rx 的 Observer 来创建 Observable 对象. 但是,使用这种方式往往比较复杂,在特 ...
- Hystrix工作流
Hystrix工作流程图: 流程图详解 1. 构造HystrixCommand对象或者HystrixObservableCommand对象 构造HystrixCommand 或HystrixObser ...
- Angular全局数据管理与同步更新
自定义实现angular中数据的状态管理,如有不妥请指正 一.先介绍一下rxjs中subject: Import {subject}from’rxjs’ Subject 数据的订阅与分发,结合报刊的发 ...
- hystrix源码之AbstractCommand
AbstractCommand HystrixCommand和HystrixObservableCommand的父类.每个command对应一个HystrixCommandKey.HystrixThr ...
- [RxJS] AsyncSubject and ReplaySubject - Learn the Differences
We can use Subject as Observable and Observer: // Subject should be only used to emit value for priv ...
随机推荐
- js --- return返回值 闭包
什么是闭包?这就是闭包! 有权访问另一个函数作用域内变量的函数都是闭包.这里 inc 函数访问了构造函数 a 里面的变量 n,所以形成了一个闭包. function a(){ var n = 0; f ...
- IOS 一句代码搞定启动引导页
前言引导页,一个酷炫的页面,自从微博用了之后一下就火起来了,对于现在来说一个app如果没有引导页似乎总显那么不接地气,那么为了让我们的app也“高大上”一次,我写了一个demo来实现启动引导页的实现, ...
- Kinect 开发 —— 常见手势识别(上)
悬浮按钮 (Hover Button) 悬浮按钮通过将鼠标点击换成悬浮然后等待(hover-and-wait)动作,解决了不小心点击的问题.当光标位于按钮之上时,意味着用户通过将光标悬浮在按钮上一段时 ...
- vue 实例的生命周期
Vue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些"钩子"让我们来做一些我们想实现的动作. 分为以下几个阶段 1.beforeCreate 此阶段为 ...
- Css3 过渡(Transition)特效回调函数
Css3 出来之后,能够说是替代了Flash,通过使用Html5和Css3的完美结合.就能够做出不论什么你想得到的特效,这里不再阐述... 近期在做一个喝水签到的功能.在想签到成功之后,签到框能够模拟 ...
- 用 cctld工具创建带有国家代码的IP地址表
用 cctld工具创建带有国家代码的IP地址表 cctld tools is creating IP addresses table with Country Code 项目地址 https://gi ...
- 为什么会出现NoSQL数据库
为什么会出现NoSQL数据库 一.总结 一句话总结:sql不支持分布式且且有性能瓶颈且不支持分布式,不同NoSQL适合不同的场景 1."不同的NoSQL数据库只适合不同的场景"这句 ...
- try {}里有一个return语句 finally执行顺序
先看例子 package example; class Demo{ public static void main(String args[]) { int x=1; System.out.print ...
- Scala——构造函数
Scala的构造函数分为主构造函数和辅助构造函数. 辅助构造函数 辅助构造函数比较容易理解,它们同C++和Java的构造函数十分类似,只有两处不同: 1.辅助构造函数的名称为this,这主要是考虑到在 ...
- 【Educational Codeforces Round 35 C】Two Cakes
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 直觉题. 感觉情况会很少. 毕竟间隔太大了.中间肯定有一些数字达不到. 有1肯定可以 2 2 x肯定可以 3 3 3也可以 2 4 ...