RxJS 运算符在事件流中等待安静期,但在事件流繁忙的情况下不会永远等待

2024-02-10

场景:

  • 我有一个事件流,每个事件都应该导致信息的更新显示(事件流来自 websockets,显示在 highcharts 图表中,但这并不重要)
  • 出于性能原因,我不想为每个事件触发 UI 更新。
  • 我宁愿做以下事情:

    • 当我收到一个事件时,我只想更新 UI,距上次更新时间已超过 X 毫秒
    • 但是,如果有任何传入事件,我无论如何都想每隔 Y 毫秒 (Y > X) 进行一次更新
    • 因此,我正在寻找某种(组合)RxJS 运算符,该运算符将限制事件流的速率,仅在发生安静期(或已超过等待安静期最大时间)时发出事件。
    • IE。我想等待安静的时期,但不是永远。

我怎样才能实现上面描述的内容?

我看过:

  • https://rxjs-dev.firebaseapp.com/api/operators/sampleTime https://rxjs-dev.firebaseapp.com/api/operators/sampleTime
  • https://rxjs-dev.firebaseapp.com/api/operators/debounceTime https://rxjs-dev.firebaseapp.com/api/operators/debounceTime
  • ...以及其他一些 rxjs 时间/速率限制运算符

您可以编写一个运算符来执行您想要的操作debounce并在通知程序可观察的组成中使用两个计时器:

  • 一个计时器,在源发出值后发出 X 毫秒;和
  • 一个计时器,在运算符返回的可观察值发出值后发出 Y 毫秒。

请参阅下面的片段。里面的评论应该解释它是如何工作的。

const {
  ConnectableObservable,
  merge,
  MonoTypeOperatorFunction,
  Observable,
  of,
  Subject,
  Subscription,
  timer
} = rxjs;

const {
  concatMap,
  debounce,
  mapTo,
  publish,
  startWith,
  switchMap
} = rxjs.operators;

// The pipeable operator:

function waitUntilQuietButNotTooLong(
  quietDuration,
  tooLongDuration
) {

  return source => new Observable(observer => {

    let tooLongTimer;
    
    // Debounce the source using a notifier that emits after `quietDuration`
    // milliseconds since the last source emission or `tooLongDuration`
    // milliseconds since the observable returned by the operator last
    // emitted.

    const debounced = source.pipe(
      debounce(() => merge(
        timer(quietDuration),
        tooLongTimer
      ))
    );

    // Each time the source emits, `debounce` will subscribe to the notifier.
    // Use `publish` to create a `ConnectableObservable` so that the too-long
    // timer will continue independently of the subscription from `debounce`
    // implementation.

    tooLongTimer = debounced.pipe(
      startWith(undefined),
      switchMap(() => timer(tooLongDuration)),
      publish()
    );

    // Connect the `tooLongTimer` observable and subscribe the observer to
    // the `debounced` observable. Compose a subscription so that
    // unsubscribing from the observable returned by the operator will
    // disconnect from `tooLongTimer` and unsubscribe from `debounced`.

    const subscription = new Subscription();
    subscription.add(tooLongTimer.connect());
    subscription.add(debounced.subscribe(observer));
    return subscription;
  });
}

// For a harness, create a subject and apply the operator:

const since = Date.now();
const source = new Subject();
source.pipe(
  waitUntilQuietButNotTooLong(100, 500)
).subscribe(value => console.log(`received ${value} @ ${Date.now() - since} ms`));

// And create an observable that emits at a particular time and subscribe
// the subject to it:

const emissions = of(0, 50, 100, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150);
emissions.pipe(
  concatMap((value, index) => timer(new Date(since + value)).pipe(
    mapTo(index)
  ))
).subscribe(source);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://unpkg.com/rxjs@6/bundles/rxjs.umd.min.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

RxJS 运算符在事件流中等待安静期,但在事件流繁忙的情况下不会永远等待 的相关文章

  • 检测单选按钮/复选框状态的变化

    我需要可靠地检测页面上单选按钮 复选框的状态变化 以便查看表单是否被修改 现在 这是一个完全独立的脚本 我无法修改任何控制表单的内容 目前 我只能看到两种方法 onchange事件处理程序 有助于处理文本框 文本区域和选择 但不会针对复选框
  • 如何恢复文本框数据

    我有一个小小的要求 我们已经恢复了之前清除的文本框数据 下面是我的 HTML 代码 table tr td td tr table
  • 如何将值发布到输入框中?

    Intro I would like to get the current time after clicking at click and POST the value into input text box Note 假设包含引导样式表
  • 有没有办法动态更改 jqGrid 的单元格值?

    这个问题可能已经被问过很多次了 但我想知道是否可以动态更改 jqgrid 的单元格值 我基本上有一个网格 它通过 JSON 字符串加载数据 在特定列的某些行上 该值可能为 null 因此 预先知道哪个行 ID 是一个问题 然后能够将 nul
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • 以下文档我无法创建 Vue.js 3 的实例

    The code https stackblitz com edit vue ttt file src main js https stackblitz com edit vue ttt file src main js 问题 我正在尝试在
  • onClick 处理程序在每个渲染周期触发

    我有这样的默认状态 this state selectedTab tab1 then 我的渲染方法是这样的 render const selectedTab this state return li tab1 li li tab2 li d
  • 如何将一个数组中的所有项目复制到另一个数组中?

    如何将数组的每个元素 其中元素是对象 复制到另一个数组中 以便它们完全独立 我不想更改一个数组中的元素来影响另一个数组 这里的关键是 数组中的条目是对象 并且 您不希望对一个数组中的对象的修改显示在另一个数组中 这意味着我们不仅需要将对象复
  • EmberJS:对象作为查询参数来刷新模型

    我遵循了查询参数指南 http guides emberjs com v1 11 0 routing query params http guides emberjs com v1 11 0 routing query params 而且效
  • 使用javascript以编程方式触发iOS safari中的复制菜单?

    我正在尝试实现一种用户友好的方式 将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板 我知道无法在这个平台上以编程方式完成此操作 但我希望能够尽可能地指导用户体验 在 iOS Safari 上 当用户手动突出显示某些文本时 会
  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程
  • 当php脚本通过ajax运行时显示进度条

    我有一个通过 ajax 向服务器提交值的表单
  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener
  • 如何在 React Native 中使用相同的 Firebase 数据库在两个应用程序之间进行通信?

    我有两个不同的应用程序使用相同的实时数据库 在第一个应用程序中 我发送的订单包含一些要保存在数据库中的数据字段 在另一个应用程序中 我只添加一个侦听器 firebase database ref userOrder currentUser
  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行
  • jQuery Mobile + Admob:轮换?

    我使用 jQuery Mobile 框架创建了一个移动应用程序 所有页面都在index php中加载 使用 div 在每个页面的页脚中 我添加了Admob代码 div div div

随机推荐

  • 访问 RadioButton 并在 Espresso 中选择它

    我正在使用 Espresso 来测试 Android 应用程序 我在尝试找到一种方法来访问和选择当前活动的RadioButton 属于RadioGroup 时遇到麻烦 有没有人有什么建议 给出以下布局
  • 如何处理 mod_rewrite 中查询字符串中的“#”?

    I asked 这个问题 https stackoverflow com questions 1640977 how to redirect old ugly urls to seo friendly ones关于将旧的 丑陋 链接重写为搜
  • Java Servlet/Jsp 图像上传以及表单值[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我有一个 jsp 表单 它接受有关员
  • 全局变量没有全局作用域

    supposedlyGlobalVariable blah ARoutine localVariable asdf MsgBox The global variable value is supposedlyGlobalVariable T
  • 访问 Bamboo 秘密/密码变量?

    我的团队有一些旧的竹子管道 其中秘密和密码在竹子变量中配置 并用竹子掩盖这些值 现在没有人知道密码 也没有记录下来 有什么方法可以访问 打印并查看bamboo 秘密 密码 变量中的值吗 读取秘密变量有一个技巧 创建包含内容的脚本任务 ech
  • 按条件对行进行分组

    我有这个数据 Start End Quantity 425 449 24 450 474 24 475 499 24 500 524 24 2300 2324 24 2400 2499 99 2500 2599 99 2800 2899 9
  • Mongoose:将 addToSet 与 ObjectIds 一起使用会产生孤立 ID

    我在使用 mongoDB addToSet 到一个充满对象 Id 的数组时遇到了一个相当有趣的问题 在我的猫鼬模式 Happening 中 我声明了一个名为 expected 的 ObjecId 数组 供 populate 使用 expec
  • 在 .Net Core 3.1 中使用 NewtonSoft 将 DataTable 转换为 JSON 字符串时,如何获得不带“\u0022”或“\”等字符的 JSON 字符串[重复]

    这个问题在这里已经有答案了 我正在 net core 3 1 中编写一个简单的 API 要将我的 DataTable 转换为 JSON 字符串 我使用 NewtonSoft 库和以下代码 string JSONresult JsonConv
  • 保护 JavaScript Web 应用程序/游戏的方法有哪些?

    背景故事 我计划实现一款休闲游戏 部署在网络应用程序中 但我不想使用 Flash 而只是使用普通的 Javascript 我想要的 Flash 的一个好处是 它分发二进制文件而不是源代码 因此更容易保护您的代码不被其他人重用 窃取 或者防止
  • 如何用 Python 编写 Web 代理

    我正在尝试用 python 编写一个网络代理 目标是访问如下网址 http proxyurl http anothersite com 并查看内容http anothersite com就像平常一样 通过滥用 requests 库 我已经取
  • Excel 一组选项中的随机数

    在 MS Excel 中 如何随机计算一组 5 个选项中的一个数字 例如 在单元格 B1 中 我想要一个随机数 即 15 30 50 75 或 100 我想要在单元格 B1 B100 中完全随机输出这 5 个数字 我想我可以使用 rand
  • Curl 只能读取前 2000 个字节吗?

    我使用了 char URL file d temporal prueba1 txt 的curl 来测试使用硬盘驱动器文件来测试接收到的数据 我有以下问题 跳过大文件中的前 2 个字符 已解决 读取数据时出错 我只想只读一次 最好是前 200
  • 通过命令行在 Chrome 中打开网址而不使用缓存

    我使用命令chrome new window htp www example com 打开一个 url 但页面是使用上次保存在缓存中的打开的 有没有办法从命令行打开 URL 强制加载而忽略缓存 Thanks 尝试以下命令 usr bin g
  • 如何从业务/模型类发送进度更新?

    假设我们有一个具有分层架构的应用程序 在视图上我们使用 MVC 或 MVVM 模型被视为域 它有很好的业务逻辑部分 现在假设我们在模型中有一个需要一些时间的方法 例如 必须对对象的每个项目进行复杂的计算或处理 在 UI 中 我们希望显示一个
  • 在 Google Colab 上训练模型时,我应该保持连接吗?

    在 Google Colab 上训练用于对象检测的数据集模型 Darknet 时 我是否需要保持与 Colab 和互联网的连接 当训练在 Colab 上进行并连接到我的驱动器时 这里的权重文件将保存在我的谷歌驱动器文件夹中 那么 我可以断开
  • R中的参数传递机制

    下面的函数用于将一个序列相乘1 x by y f1 lt function x y return lapply 1 x function a b b a b y 好像a用于表示序列中的元素1 x 但是不知道如何理解这个参数传递机制 在其他
  • java.io.File 中 mkdir() 和 mkdirs() 之间的区别

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 谁能告诉我这两种方法之间的区别 file mkdir file mkdirs mkdirs 还创造了父目录在这个路径中File代表 jav
  • 从常规 ES6 类方法调用静态方法

    调用静态方法的标准方法是什么 我可以考虑使用constructor或者使用类本身的名称 我不喜欢后者 因为它感觉没有必要 前者是推荐的方式 还是还有其他方式 这是一个 人为的 示例 class SomeObject constructor
  • jQuery - keydown / keypress /keyup ENTERKEY 检测?

    尝试让 jQuery 检测 Enter 输入 但检测到空格和其他键 未检测到 Enter 下面有什么问题 entersomething keyup function e alert up var code e keyCode e keyCo
  • RxJS 运算符在事件流中等待安静期,但在事件流繁忙的情况下不会永远等待

    场景 我有一个事件流 每个事件都应该导致信息的更新显示 事件流来自 websockets 显示在 highcharts 图表中 但这并不重要 出于性能原因 我不想为每个事件触发 UI 更新 我宁愿做以下事情 当我收到一个事件时 我只想更新