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. swift和oc混编

    请参考这篇博客:点击查看

  2. CentOS6.7 常用操作命令

    centos 安装py环境 1.安装wget工具: yum install wget 2.安装Python-2.7.8: wget --no-check-certificate https://www ...

  3. LayoutInflater 原理分析 示例

    LayoutInflater简介        LayoutInflater 顾名思义就是布局填充器,做过Android界面编程,相信对这个类都比较熟悉,可能有人说,我们在activity中使用set ...

  4. WPF样式和资源2

    <Window.Resources> <FontFamily x:key="ButtonFontFamily">Time New Roman</Fon ...

  5. svn服务器的配置步骤

    1.安装客户端: TortoiseSVN-1.9.3.27038-x64-svn-1.9.3.msi下载地址:http://jaist.dl.sourceforge.net/project/torto ...

  6. Java_观察者模式（Observable和Observer） -转

    原文地址: Java_观察者模式(Observable和Observer) 一.观察者模式介绍    在Java中通过Observable类和Observer接口实现了观察者模式.一个Observer ...

  7. Google推出iOS功能性UI测试框架EarlGrey

    经过了一段时间的酝酿后,Google很高兴地宣布了EarlGrey,一款针对于iOS的功能性UI测试框架.诸如YouTube.Google Calendar.Google Photos.Google ...

  8. ST表入门学习poj3264 hdu5443 hdu5289 codeforces round #361 div2D

    ST算法介绍:[转自http://blog.csdn.net/insistgogo/article/details/9929103] 作用:ST算法是用来求解给定区间RMQ的最值,本文以最小值为例 方 ...

  9. QT小插件类之QRoundProgressBar

    QRoundProgressBar类 1. 详细描述 QRoundProgressBar类能够实现一个圆形的进度图表,并且有和QProgressBar类似的API接口 1.1 继承关系 #includ ...

  10. Crontab 计划任务

    有一部分工作,需要某个时间开始,每天执行,每间断一段时间执行.这个时候就需要了crontab.crontab 管理着linux上一些定期的任务.log rotate,logwatch 等等废话不多说来 ...