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. 如何在虚拟机中安装Win7系统

    在虚拟机里安装系统,可以很方便我们对系统的各项功能进行测试,而又不会影响本机系统,本节就介绍如何在虚拟机中安装Win7系统 . 工具/原料 vm9虚拟机 电脑一台 方法/步骤 1 在百度上搜索win7 ...

  2. linux 常用find命令

    1.查找当前目录下以test开头的所有文件-会进入子目录中去查找 [root@rusky hgfs]# find -name test* 2.查找当前目录下名为test.txt的文件-会进入子目录中去 ...

  3. Javascript高级程序设计读书笔记（第10章 DOM）

    第10章 DOM 10.1  节点层次 每个节点都有一个nodeType属性,用于表明节点的类型.任何节点类型必是下面中的一个: Node.Element_NODE(1); NODE.ATTRIBUT ...

  4. 封装Socket.BeginReceive/EndReceive支持Timeout简介

    .NET中的Socket类提供了网络通信常用的方法,分别提供了同步和异步两个版本,其中异步的实现是基于APM异步模式实现,即BeginXXX/EndXXX的方式.异步方法由于其非阻塞的特性,在需考虑程 ...

  5. NPOI心得

    一个Excel文件表示为一个IWookbook,Sheet是ISheet,其它细分为IRow,ICell. 2003和2007版本为IWookbook接口的不同实现:HSSFWookbook和XSSF ...

  6. jqueryMobile中select样式自定义

    要去掉引入的jqueryMobile给下拉框组件的样式,有两种办法. 第一种:全局的去掉所有的下拉框样式: <link rel="stylesheet" href=" ...

  7. oracle 优化 —— 分区表

    一.分区表简介 分区表类型:[范围分区].[列表分区] [hash分区]    [这些分区的组合分区] 范围分区:以某一个范围进行分区.eg:时间段划分. 列表分区:以某一些几个值进行分区.eg:地区 ...

  8. java正则

    package cn.stat.p4.ipdemo; import java.util.regex.Matcher; import java.util.regex.Pattern; public cl ...

  9. TEXT类型

    创建文档document.createTextNode("直接就是想打的文本") 然后用 appendChild() 再然后就是一些其他的方法 appendData(a)在a里面直 ...

  10. js中的逻辑或和逻辑与

    a=''||'abc';                              //返回什么?  'abc' a=1||2;                                  // ...