如何在 RxJS 中实现时间到期热可观察(或在响应式扩展中通用)

2024-03-23

我想用 RxJs 实现时间过期缓存。这是“正常”缓存的示例:

//let this represents "heavy duty job"
var data = Rx.Observable.return(Math.random() * 1000).delay(2000);

//and we want to cache result
var cachedData = new Rx.AsyncSubject();
data.subscribe(cachedData);

cachedData.subscribe(function(data){
    //after 2 seconds, result is here and data is cached
    //next subscribe returns immediately data
    cachedData.subscribe(function(data2){ /*this is "instant"*/ });
});

When subscribe on cachedData第一次调用,调用“重载作业”,2秒后结果保存在cachedData (AsyncSubject)。任何其他后续subscribe on cachedData立即返回保存的结果(因此缓存实现)。

我想要实现的是在一段时间内“调味”cachedData是有效的,当时间过去后,我想重新运行新数据的“重型作业”,并在新的时间段再次缓存它,等等......

期望的行为:

//pseudo code
cachedData.youShouldExpireInXSeconds(10);


//let's assume that all code is sequential from here

//this is 1.st run
cachedData.subscribe(function (data) {
    //this first subscription actually runs "heavy duty job", and
    //after 2 seconds first result data is here
});

//this is 2.nd run, just after 1.st run finished
cachedData.subscribe(function (data) {
    //this result is cached
});

//15 seconds later
// cacheData should expired
cachedData.subscribe(function (data) {
    //i'm expecting same behaviour as it was 1.st run:
    // - this runs new "heavy duty job"
    // - and after 2 seconds we got new data result
});


//....
//etc

我是 Rx(Js) 的新手,无法弄清楚如何通过冷却来实现这个热可观察值。


您所缺少的只是安排一个任务来取代您的cachedData与一个新的AsyncSubject一段时间后。以下是如何作为新人进行操作Rx.Observable method:

Rx.Observable.prototype.cacheWithExpiration = function(expirationMs, scheduler) {
    var source = this,
        cachedData = undefined;

    // Use timeout scheduler if scheduler not supplied
    scheduler = scheduler || Rx.Scheduler.timeout;

    return Rx.Observable.create(function (observer) {

        if (!cachedData) {
            // The data is not cached.
            // create a subject to hold the result
            cachedData = new Rx.AsyncSubject();

            // subscribe to the query
            source.subscribe(cachedData);

            // when the query completes, start a timer which will expire the cache
            cachedData.subscribe(function () {
                scheduler.scheduleWithRelative(expirationMs, function () {
                    // clear the cache
                    cachedData = undefined;
                });
            });
        }

        // subscribe the observer to the cached data
        return cachedData.subscribe(observer);
    });
};

Usage:

// a *cold* observable the issues a slow query each time it is subscribed
var data = Rx.Observable.return(42).delay(5000);

// the cached query
var cachedData = data.cacheWithExpiration(15000);

// first observer must wait
cachedData.subscribe();

// wait 3 seconds

// second observer gets result instantly
cachedData.subscribe();

// wait 15 seconds

// observer must wait again
cachedData.subscribe();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 RxJS 中实现时间到期热可观察(或在响应式扩展中通用) 的相关文章

  • 将 javascript 合并到一个文件中

    最近阅读了雅虎的网络优化技巧并使用 YSlow 我在我的一个网站上实现了他们的一些想法http www gwynfryncottages com http www gwynfryncottages com你可以在这里看到该文件http ww
  • jqgrid 在编辑框中选择不正确的下拉选项值

    我正在使用表单编辑 表单中有两个选择框 一个选择框是国家 地区 另一个选择框是州 州选择框取决于所选的国家 地区 并将动态填充 例如 Country 美国 期权价值 1 英国 期权价值 2 美国的状态 阿拉巴马州 选项值 1 加利福尼亚州
  • 单击量角器中元素的给定坐标

    我想点击我的特定位置canvas元素 所以我编写了以下量角器代码 var canvas element by id canvas var clickCanvas function toRight toBottom browser actio
  • javascript中文本区域限制每行的字符数

    我试图用 javascript 限制文本区域中每行的字符数 我在这里看到了一些例子 但并不完全符合我的要求 我写了一些东西 只有当你每次添加超过限制时才可以 换句话说 我每行有 10 个字符的限制 如果你总是输入至少 10 个字符就可以正常
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • JavaScript 逻辑赋值是如何工作的?

    在 javascript 中 如果我们有一些代码 例如 var a one var b q a alert b 逻辑 OR 运算符会将 a 的值分配给 b 并且警报将为 一 这仅限于作业还是我们可以在任何地方使用它 似乎空字符串被视为与未定
  • 如何使用 jQuery UI Sortable 正确相交?

    这是我对 jQuery UI Sortable 进行动画处理的尝试 https codepen io anon pen YdMOXE https codepen io anon pen YdMOXE var startIndex chang
  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0
  • json、rails、javascript 中的解析错误

    我需要将 ruby 数组放入 javascript 数组中 但出现解析错误 var characters 这就是我将 ruby 嵌入到内联 javascript 中的方式 但它出现了解析错误 我应该如何将此 ruby 数组放入 javasc
  • 将 ESLint 与 Airbnb 样式和选项卡结合使用 (React.js)

    我正在开发一个 React js 应用程序 并且正在尝试检查我的代码 我将 ESLint 与 Airbnb 风格一起使用 但出现以下错误 src Test jsx 4 2 error Unexpected tab character no
  • 如何按值删除数组中的多个项目?

    我正在尝试做一个removeAll 函数 它将删除具有该特定值 而不是索引 的数组的所有元素 当我们对循环进行任何更改时 棘手的部分就出现了 索引往往会移动 使其很难像我们想要的那样工作 并且每次更改时都重新启动循环 这在大数组上效率非常低
  • 您网站上的自定义 jQuery 脚本有多少行代码?多少才算是太多呢?

    对于我们的网站 我使用了大量 jQuery 现在我正在查看基础库顶部的 340 行 jQuery 代码 多少是太多了 我将添加更多内容 我什么时候开始尝试压缩代码并最终转向 OOP 行数并不意味着什么 重要的是你实际上在做什么 您可能拥有
  • 限制事件和锁定方法

    让我们假设我有这样的东西
  • 在部分渲染时执行 JavaScript

    我有一些 JavaScript 代码 我想在用户单击其文件夹之一后执行 它会触发 show 操作和 show js erb 从而呈 现部分内容 Show js erb 当用户单击其文件夹之一时触发 如下所示 body append 它成功注
  • 在 React JSX 中返回配对元素

    问题 在 React 中 您希望通过映射数组来创建 DOM 结构 但数组中的每个项目应返回 2 个元素 例如 import React from react import from lodash let Component React ex
  • 如何将命名空间与 TypeScript 外部模块一起使用?

    我有一些代码 基本类型 ts export namespace Living Things export class Animal move export class Plant photosynthesize dog ts import
  • 如何在 JSP 编辑器中激活 javascript 的语法着色 - Eclipse

    在某些情况下 javascript 确实必须位于 JSP 页面中 而不是位于单独的文件中 有些框架还使用Javascript做一些事情 以便用户将其包含到JSP标签中 这样JS就不会出现在
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho
  • 如何在 ionic2 中 pop() 之后重新加载 ion-page

    我有2页Page1 and Page2 我用过this nav pop 在Page2中 它将弹出Page2 Page1将启用 但我想刷新Page1 先感谢您 您可以将父页面与导航推送一起传递 这样您就可以将父页面作为 navParamter

随机推荐