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. Netmon: A light-weight network monitor for Windows

    Netmon is a light-weight network monitor that works on Windows operating systems. It provides differ ...

  2. Java基础知识强化56：经典排序之快速排序（QuickSort）

    1. 快速排序的原理: 快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其 ...

  3. OD: Memory Attach Technology - Off by One, Virtual Function in C++ & Heap Spray

    Off by One 根据 Halvar Flake 在“Third Generation Exploitation”中的描述,漏洞利用技术依攻击难度从小到大分为三类: . 基础的栈溢出利用,可以利用 ...

  4. web笔记

    application: 在tomcat启动过程,会将所有的应用加载进来,会为每一个应用创建一个application对象.这个对象是唯一.但是所有的web应用是互不影响的. like模糊查询 重定向 ...

  5. 使用ICallbackEventHandler接口更高效实现Ajax

    使用ICallbackEventHandler接口可以方便地高效地实现Ajax功能 1.处理页面需实现ICallbackEventHandler接口,此接口有两个方法 a.GetCallbackRes ...

  6. (转)几种HtmlEncode的区别

    一.C#中的编码 HttpUtility.HtmlDecode.HttpUtility.HtmlEncode与Server.HtmlDecode.Server.HtmlEncode与HttpServe ...

  7. SQL从入门到基础 - 05 数据分组、Having语句

    一.数据分组 1. 按照年龄进行分组统计各个年龄段的人数: Select FAge,count(*) from T_Employee group by FAge; 2. Group by子句必须放到w ...

  8. Linux 常用命令使用方法大搜刮

    Linux 常用命令使用方法大搜刮 1.# 表示权限用户(如:root),$ 表示普通用户  开机提示:Login:输入用户名  password:输入口令   用户是系统注册用户成功登陆后,可以进入 ...

  9. Java系列--第五篇 基于Maven的SSME之Token及Parameterized单元测试

    本来在第四篇要说完的,但是写着写着,我觉得内容有点多起来了,所以就另开这篇,在这里专门讲述Token的定义,JSP自定义标签以及如何用Parameterized的来做单元测试. 1,新建包com.va ...

  10. 手机网页中的hover效果实现

    js文件 function mouseout(obj) { var className ="hover"; var _ecname = obj.className; if (_ec ...