Rxjs入门4-Scheduler[调度器类型、调度器的使用]、RxJs实例[变量赋值、体质指数(BMI)、事件的运用、angular中的运用]、相关思考问题、参考资料

最新推荐文章于 2024-08-23 08:36:56 发布

_尊哥

最新推荐文章于 2024-08-23 08:36:56 发布

阅读量1.7k

点赞数 2

分类专栏： JavaScript 文章标签： rxjs

本文链接：https://blog.csdn.net/cuishizun/article/details/80380824

版权

本文详细介绍了RxJS中的Scheduler调度器，包括其类型和使用方法，通过实例展示了如何改变事件的发出顺序和速度。此外，还探讨了RxJS在Angular中的应用，如Subject的使用和HTTP服务的处理，以及相关思考问题和参考资料。

摘要由CSDN通过智能技术生成

31、Scheduler (调度器)

RxJS 中的调度器 ( Schedulers ) 是用来控制事件发出的顺序和速度的(发送给观察者的)。

const a$ = Rx.Observable.of(1, 2);
const b$ = Rx.Observable.of(10);
                    
const c$ = Rx.Observable.combineLatest(a$, b$, (a, b) => a + b);
                    
c$.subscribe(c => console.log(c));

这里写图片描述
默认情况下，RxJS 使用所谓的递归调度器。下面是它的工作原理:

c$ 被订阅
combineLatest 的第一个输入流 a$ 被订阅
a$ 发出值 1
combineLatest 将 1 作为 a$ 的最新值进行保存
a$ 发出值 2
combineLatest 将 2 作为 a$ 的最新值进行保存
combineLatest 的第二个输入流 b$ 被订阅
b$ 发出值 10
combineLatest 将 10 作为 b$ 的最新值进行保存
combineLatest 现在同时拥有了 a$ 和 b$ 的值，因此它发出值 2 + 10

发出的顺序为 1, 2, 10。

咱们在 a$ 上使用 asap 调度器来让其“慢下来”:

const a$ = Rx.Observable.from([1, 2], Rx.Scheduler.asap); // 新代码
const b$ = Rx.Observable.of(10);

const c$ = Rx.Observable.combineLatest(a$, b$, (a, b) => a + b);

c$.subscribe(c => console.log(c))

这里写图片描述

c$ 被订阅
combineLatest 的第一个输入流 a$ 被订阅
combineLatest 的第二个输入流 b$ 被订阅
b$ 发出值 10
combineLatest 将 10 作为 b$ 的最新值进行保存
a$ 发出值 1
combineLatest 将 1 作为 a$ 的最新值进行保存
combineLatest 现在同时拥有了 a$ 和 b$ 的值，因此它发出值 1 + 10
a$ 发出值 2
combineLatest 将 2 作为 a$ 的最新值进行保存
combineLatest 发出值 2 + 10

发出的顺序为 10, 1, 2。

咱们可以为 b$ 也自定义调度器:

const a$ = Rx.Observable.from([1, 2], Rx.Scheduler.asap);

const b$ = Rx.Observable.from([10], Rx.Scheduler.asap); // 新代码

const c$ = Rx.Observable.combineLatest(a$, b$, (a, b) => a + b);

c$.subscribe(c => console.log(c));

c$ 被订阅
combineLatest 的第一个输入流 a$ 被订阅
combineLatest 的第二个输入流 b$ 被订阅
a$ 发出值 1
combineLatest 将 1 作为 a$ 的最新值进行保存
b$ 发出值 10
combineLatest 将 10 作为 b$ 的最新值进行保存
combineLatest 现在同时拥有了 a$ 和 b$ 的值，因此它发出值 1 + 10
a$ 发出值 2
combineLatest 将 2 作为 a$ 的最新值进行保存
combineLatest 发出值 2 + 10

发出的顺序为 1, 10, 2。

调度器还可以让事件的发出变得更快，同时保持发出的顺序不变。例如，RxJS 的 TestScheduler 可以使 Observable.interval(1000).take(10) 被订阅时进行同步执行，而不需要花费10秒钟来完成:

Rx.Observable.interval(1000, new Rx.TestScheduler()).take(10)

31、Scheduler 调度器类型

调度器	目的
null	不传递任何调度器的话，会以同步递归的方式发送通知。用于定时操作或尾递归操作。
Rx.Scheduler.queue	当前事件帧中的队列调度(蹦床调度器)。用于迭代操作。
Rx.Scheduler.asap	微任务的队列调度，它使用可用的最快速的传输机制，比如 Node.js 的 process.nextTick() 或 Web Worker 的 MessageChannel 或 setTimeout 或其他。用于异步转换。
Rx.Scheduler.async	使用 setInterval 的调度。用于基于时间的操作符。