npm 包 @nll/rx-without 使用教程

@nll/rx-without 是一个能够轻松地将轮询和超时删除与 rxjs 连接起来的工具。该工具简化了代码的编写,提高了代码的可读性和可维护性。

安装

你可以通过 npm 命令来安装这个包:

--- ------- --------------- ------

使用方法

在使用 @nll/rx-without 之前,我们需要将其导入:

------ ----------- ---- ------------------

rxWithout 函数接受三个参数。它们分别是:

  • timer$: Observable<number>: 一个决定轮询的时间间隔的 Observable
  • condition$: Observable<boolean>: 一个决定是否终止轮询的 Observable
  • whenStopped$: Observable<any>: 当停止轮询时需要执行的处理函数。

现在让我们来看一段简单的示例代码,这段代码会每隔 1s 打印一次 "Hello World!",并且会在 3s 后停止执行:

------ ---------- --- ---- -------
------ ----------- ---- -----------------
------ ----------- ---- ------------------

----- ------ - ---------------

----- ---------- - ------------
    -------------------------------------
--

----- ------------ - ---------

----------------- ----------- -------------
  ------------- -- -
      ------------------ ---------
  ---

如果你运行这份代码,会发现控制台会依次打印出: "Hello World!","Hello World!","Hello World!",然后代码就停止执行了。

深入理解

@nll/rx-without 帮助我们更容易地实现轮询和超时删除。虽然我们可以自己手写,但是在使用 @nll/rx-without 之后,我们可以专注于解决业务问题而不是这些底层细节。

其中,一个重要的概念是 rxjs 中的 ObservableOperator。在 rxjs 中,Observable 即为可观察序列,简称为 Observable。它负责将肩负事件推送,转化为可订阅对象用于响应事件 via subscribe()方法。而 Operator 的作用是用于加工操作数据流。

在上文的示例代码中,我们使用了 rxjs 的两个操作符:intervaltakeUntil

interval 操作符会创建一个基于时间的 Observable,它会创建一个无限整数序列。使用该操作符可以每隔一段时间产生一个事件。

takeUntil 操作符会在另一个 Observable notifier$ 发出事件时,终止 source$ 中的数据流。在上述代码中,notifier$ 是一个 Observable<boolean>,当它发出 true 时,takeUntil 将会停止 timer$ 发出事件。

利用这两个操作符和 @nll/rx-without,我们可以方便地实现轮询和超时删除功能,从而为前端开发提供更多可能性。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005601681e8991b448de2e7


猜你喜欢

  • npm包@btcc_exchange/poloniex-orderbook使用教程

    简介 @btcc_exchange/poloniex-orderbook是一个npm包,用于对Poloniex交易所中的订单簿进行操作。该包提供了一系列的API,让用户可以方便地获取订单簿数据,以及对...

    3 年前
  • npm 包 code-auto 使用教程

    介绍 在前端开发中,我们经常需要大量的代码重复,而 code-auto(以下简称 CA)通过简化重复的代码写入,可以提高代码质量和开发效率。CA是一个用于快速生成代码的 npm 包,同时也适用于其他语...

    3 年前
  • npm包jeason-eslint-config使用教程

    在前端开发中,我们使用eslint来规范我们的代码。jeason-eslint-config 是一款前端团队内部使用的eslintrc规则配置,旨在提高代码的可读性、可维护性和一致性。

    3 年前
  • npm包 crc32c-webpack使用教程

    在前端开发中,我们会经常使用到各种npm包来解决自己所遇到的问题。其中,crc32c-webpack是一个非常实用的npm包,它可以帮助我们在webpack打包中对文件进行hash计算,并且提供了一些...

    3 年前
  • npm 包 fetch-robot 使用教程

    什么是 fetch-robot? Fetch-robot 是一个基于 Fetch API 封装而成的 npm 包,旨在简化从服务器上获取和处理数据的流程。Fetch-robot 支持链式调用,能够轻松...

    3 年前
  • NPM 包 Kotlin-Node 使用教程

    Kotlin是一种新型的JVM语言,它的出现为开发者带来了更多的选择。Kotlin可以与Node.js一样,用于构建前端应用、API和服务器端应用。不久前,Kotlin团队发布了一个npm包,叫做ko...

    3 年前
  • npm 包 node-farmer 使用教程

    什么是 node-farmer node-farmer 是一个基于 Node.js 的 npm 包,它提供了简单易用的工具,用于在多个子进程之间分配任务进行并行处理。

    3 年前
  • npm 包 cordova-plugin-googlemobileadsmediationmopub 使用教程

    随着移动互联网的普及,广告成为了移动应用盈利的常见方式之一。而若要在移动应用中嵌入广告,则需要使用到广告中介服务。Cordova 中的广告中介插件 cordova-plugin-googlemobil...

    3 年前
  • npm 包 mock-audio-element-adv 使用教程

    在前端开发中,经常需要对音频元素进行操作和调试。但是,由于音频资源的获取和加载过程较为繁琐复杂,因此为了提高开发效率和调试方便性,我们可以使用 npm 包 mock-audio-element-adv...

    3 年前
  • npm 包 helper-tools 使用教程

    简介 在前端开发中,难免会遇到一些需要提高开发效率的问题,比如需要在多个项目中复用一些公共的代码工具类。这时候,可以考虑使用 npm 包来解决这个问题。在这篇文章中,我们将介绍一个叫做 helper-...

    3 年前
  • npm 包 react-native-horizontal-calendar 使用教程

    介绍 react-native-horizontal-calendar 是一个 React Native 的水平日历组件。它可以让用户在日历中快速选择想要查看的时间段,并提供了丰富的自定义属性,使用户...

    3 年前
  • npm 包 vue-inject-js 使用教程

    简介 vue-inject-js 是一个可以简单方便实现依赖注入的插件,可以在 Vue 组件中使用 @Inject() 和 @Provide() 来注入和提供一些数据或方法。

    3 年前
  • npm 包 api-bittrex 使用教程

    简介 api-bittrex 是一个基于 Node.js 平台的,用于集成比特币交易所 Bittrex 官方 API 的 node.js 第三方模块,方便开发者快速创建自己的比特币交易应用。

    3 年前
  • npm 包 geonames-api-typescript 使用教程

    概述 在前端开发中,有时需要使用到国家或城市的地理位置信息。而 GeoNames 是一套免费、开放的地理位置数据库,提供丰富的地理位置信息。而 geonames-api-typescript NPM ...

    3 年前
  • npm 包 can-search-select 使用教程

    在前端开发中,我们经常需要使用选择框组件来让用户选择一项或多项。can-search-select 就是一个非常实用的选择框组件。它不仅支持搜索,还可对选项进行分组和过滤等功能。

    3 年前
  • npm 包 falcon-core 使用教程

    简介 falcon-core 是一款前端框架核心库,它提供了一些常用的工具函数、UI 组件、样式等,能够减少前端开发的重复劳动,提高开发效率。该库支持React、Vue、Angular 等主流框架。

    3 年前
  • npm 包 mirrorv 使用教程

    作为一个前端开发者,我们时常需要使用一些优秀的开源包来辅助我们的开发工作。然而,由于网络问题,很多时候我们需要手动更换 npm 镜像,这极大影响了我们的开发效率。今天,我将向大家介绍一个非常实用的 n...

    3 年前
  • npm 包 ng-vote 使用教程

    介绍 ng-vote 是一个 AngularJS 的投票组件。它可以很方便地为你的应用添加一个投票系统,支持单选和多选投票。在这篇文章中,我们将介绍如何使用 ng-vote。

    3 年前
  • npm 包 react-native-screen-navbar 使用教程

    React Native 是一个非常流行的跨平台移动应用开发框架,它提供了丰富的 API 和组件。其中,NavBar 组件可以为 React Native 应用程序创建一个简单的顶部导航条,但其定位是...

    3 年前
  • npm 包 dry-id-table-pmb 使用教程

    介绍 dry-id-table-pmb 是一个基于 React 开发的 id 表格组件,可以帮助前端开发者快速开发出具有 id 功能的表格组件。其具有以下特点: 支持客户端搜索和排序 支持数据分页和...

    3 年前

相关推荐

    暂无文章