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. hdu 4940 无源汇有上下界最大流

    /* <img src="http://img.blog.csdn.net/20140823174212937?watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  2. Zend Framework学习日记(2)--HelloWorld篇(转)

    Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...

  3. ArrayList 学习笔记

        接口   ArrayList实现了List接口,因此可以当作一个List来使用. 此外,ArrayList还实现RandomAccess接口和Serializable,说明ArrayList支 ...

  4. javascript 知识点坑

    1. JavaScript事件属性 event.target 当目标事件发生span里面 当目标事件发生在main里面 e.target; // 目标节点DOM结构   e.target.id; // ...

  5. CentOS7 安装chrome浏览器

    本篇文章主要记录如何在CentOS7.0上安装chrome. 1.配置yum下载源: 在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repo, 并且在该文件中添加 ...

  6. Myself

    每次过来写博客,一定是遇到什么问题,并且自己还解决不来. 并不是单纯的安静下来书写心得体会-->讨厌之余都有点看不起自己. 闲话少说,回归正题. C语言之于我可是骄傲与挫败并存. 当我做程式遇到 ...

  7. 【iOS开发之静态库、动态库】

    什么是库? 库 就是程序代码的集合, 是共享程序代码的一种方式,库一般分两类:开源库和闭源库.github中共享一般是开源库:闭源库分为:静态库和动态库,闭源库不开放源代码,是经过编译的二进制文件,一 ...

  8. js-事件委托

    事件委托一般用于动态生成的元素中使用,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  9. ASP.NET MVC3.0或4.0设置二级域名的方法

    之前我就想做二级域名指向同一个IP同一个程序无非是在路由匹配规则上做文章也就是对Url的重写的一种思路.我用了半天时间上网查阅了相关资料并做了Demo测试是完全 以的,在这分享给大家... 假如网站主 ...

  10. OC随笔一：类

    总结:        在oc中,我们要整出一个类来,首先需要一个.h头文件和一个.m实现文件.一般我们创建的类都继承了根类,因为根类帮我们实现了很多实用的方法,而类里面会有变量(属性) .函数(方法) ...