This lesson covers how to toggle an observable on and off from another observable by showing how to use a checkbox as a toggle for a stream of data.

<!DOCTYPE html>

<html>

<head>

<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-alpha.8/dist/global/Rx.js"></script>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

  <input type="checkbox" id="toggle">

  <div id="display"></div>

</body>

</html>
const display = document.querySelector('#display');

const toggle = document.querySelector('#toggle');

const source$ = Rx.Observable.interval(100)

  .map(() => '.');

const checked$ = Rx.Observable.fromEvent(toggle, 'change')

  .map(e => e.target.checked);

const sourceThatStop$ = source$.takeUntil(checked$);

checked$

  .filter( flag => flag === true)

  .switchMapTo( sourceThatStop$ )

  .subscribe( (x) => {

    display.innerHTML += x;

});

[RxJS] Toggle A Stream On And Off With RxJS的更多相关文章

  1. [RxJS] Logging a Stream with do()

    To help understand your stream, you’ll almost always want to log out some the intermediate values to ...

  2. [RxJS] Stopping a Stream with TakeUntil

    Observables often need to be stopped before they are completed. This lesson shows how to use takeUnt ...

  3. [RxJS] Starting a Stream with SwitchMap & switchMapTo

    From an event map to another event we can use switchMap(), switchMap() accept an function which retu ...

  4. [RxJS] Completing a Stream with TakeWhile

    Subscribe can take three params: subscribe( (x)=> console.log(x), err=> console.log(err), ()=& ...

  5. [RxJS] Aggregating Streams With Reduce And Scan using RxJS

    What is the RxJS equivalent of Array reduce? What if I want to emit my reduced or aggregated value a ...

  6. [RxJS] Reactive Programming - Using cached network data with RxJS -- withLatestFrom()

    So now we want to replace one user when we click the 'x' button. To do that, we want: 1. Get the cac ...

  7. [RxJS] Reactive Programming - Clear data while loading with RxJS startWith()

    In currently implemention, there is one problem, when the page load and click refresh button, the us ...

  8. [RxJS] Reactive Programming - Rendering on the DOM with RxJS

    <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery- ...

  9. [RxJS] Implement the `map` Operator from Scratch in RxJS

    While it's great to use the RxJS built-in operators, it's also important to realize you now have the ...

随机推荐

  1. Calendar 日历控件使用

    <link rel="stylesheet" href="__STATIC__/js/calendar/calendar-blue.css"/> & ...

  2. html表格标签与属性

    标记:  标 记  说 明 <Table> 表格标记 <Tr> 行标记 <Td> 单元格标记  <Th> 表头标记 <Table>标记属性: ...

  3. iis配置出现的问题及解决

    唯一密钥属性“value”设置…无法添加类型为add 在配置IIS7.5时,会出现 在唯一密钥属性“value”设置为“default.aspx”(或者index.asp等)时,无法添加类型为“add ...

  4. SICP 阅读笔记(二)

    Chapter 1: Building Abstractions with Procedures 2015-09-29 016 Preface of this chapter QUOTE: The a ...

  5. oracle rac 数据库常用命令

    oracle rac 数据库常用命令:1.所有实例和服务的状态srvclt status database -d orcl单个实例的状态:srvctl status instance -d orcl ...

  6. linux 使用ptrace函数时找不到头文件 .h 或者找不到某个宏的解决方法

    例如: #include <stdio.h> #include <sys/ptrace.h> #include <sys/types.h> #include < ...

  7. C#类、静态类

    C#是面向对象(object-oriented)类型的计算机语言,使用类(class)来体现面向对象的概念. 分类(classification) 我们在现实世界中,会遇到很多被分类的事物.例如,动物 ...

  8. 一、webpack那点事-安装、环境搭建

    前言: 还记得两年前刚来公司才几个月,经理就安排我去做JS地图相关的维护和开发工作,然后就跟着一个公司老鸟(没俩月他离职了)熟悉地图相关的功能. 本人嘛,那会前端JS实际开发经验也才几个月,然后当我看 ...

  9. python 登陆一个网站

    今天想用python写一个登陆的脚本,搜了一下,网上挺多的,看了一些后写了个登陆虎扑论坛的脚本. 原理: 只要在发送http请求时,带上含有正常登陆的cookie就可以了. 1.首先我们要先了解coo ...

  10. 标准程序员系列－Github篇－初始化一个代码仓库

    下面将一步步介绍怎样使用GitHub来初始化一个项目的版本控制仓库: 1. 到GitHub上注册自己的账号:https://github.com/ 2. 创建第一个代码仓库一个仓库相当于一个项目的代码 ...