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. 关于this的指向问题

    一个关于this指向而引发的血案... 在测试this指向的程序中,我写错了id对象,结果呢,居然也有效果,这真是超于我意料之外太多了,我以为自己写错了,结果一样可以用....... <div ...

  2. JS 函数参数

    1.简单的无参函数调用 function Test1(Func) { Func(); } function Test2() { alert("我要被作为函数参数啦!"); } // ...

  3. shell中命令的执行流程

    在shell中,一个命令有3中写法: 1 可以直接写(Normal Command) 2 可以放在双引号中("Command") 3 可以放在单引号中('Comand') 这3中写 ...

  4. C++ 知识点1

    typedef的陷阱 严格来说typedef并不是定义别名,而是定义类型,比如typedef int a;按照大部分书本说来,就是把a看做int,这种说法初学看来是正确的,也易于理解,但是遇到type ...

  5. JavaScript高级程序设计第20章JSON 笔记 （学习笔记）

    第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5  表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”ag ...

  6. angularjs——module

    1.创建module //第一个参数是模块的名称 var head=angular.module('headApp',[]); head.controller("User",[&q ...

  7. [Mugeda HTML5技术教程之10]发布内容

    动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...

  8. 在Web开发方面Java跟PHp八大对比

    在Web开发方面Java跟PHp八大对比 <本文摘自百度经验,用来简单对比一下这两种语言> 一. 语言比较 PHP是解释执行的服务器脚本语言,首先php有简单容易上手的特点.语法和c语言比 ...

  9. 自动启动docker container

    当系统启动的时候要启动docker container, 可以利用systemctl来实现 比如拿mongodb为例 创建 /usr/lib/systemd/system/docker_mongodb ...

  10. C 产生随机码

    #include<stdio.h>#include<malloc.h>#include<conio.h>#include<stdlib.h>#inclu ...