Now we want each time we click refresh button, we will get new group of users. So we need to get the refresh button click event stream:

var refreshButton = document.querySelector('.refresh');
var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');

Then each time refreshClickStream happens, we will get users request url:

var requestOnRefreshStream = refreshClickStream
.map(ev => {
var randomOffset = Math.floor(Math.random()*500);
return 'https://api.github.com/users?since=' + randomOffset;
});

And we use this url to get json object:

var responseStream = requestOnRefreshStream
.flatMap(requestUrl =>
Rx.Observable.fromPromise(jQuery.getJSON(requestUrl))
);

But the problem here is when the page loaded, we haven't click refresh button yet, therefore there is no data fetched fromt the server.

So we need to have a stream when the page loaded:

var startupRequestStream = Rx.Observable.just('https://api.github.com/users');

Then we can merge startUpRequestStream with requestOnRefreshStream:

var responseStream = requestOnRefreshStream
.merge(startupRequestStream)
.flatMap(requestUrl =>
Rx.Observable.fromPromise(jQuery.getJSON(requestUrl))
);
//-------a-----b-----c--------->
//s----------------------------->
//merge
//s------a-----b-----c--------->

[RxJS] Reactive Programming - New requests from refresh clicks -- merge()的更多相关文章

  1. [RxJS] Reactive Programming - What is RxJS?

    First thing need to understand is, Reactive programming is dealing with the event stream. Event stre ...

  2. [Reactive Programming] Async requests and responses in RxJS

    We will learn how to perform network requests to a backend using RxJS Observables. A example of basi ...

  3. [RxJS] Reactive Programming - Sharing network requests with shareReplay()

    Currently we show three users in the list, it actually do three time network request, we can verfiy ...

  4. [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 ...

  5. [RxJS] Reactive Programming - Rendering on the DOM with RxJS

    <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery- ...

  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 - Why choose RxJS?

    RxJS is super when dealing with the dynamic value. Let's see an example which not using RxJS: var a ...

  8. [Reactive Programming] Using an event stream of double clicks -- buffer()

    See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect doubl ...

  9. [Reactive Programming] RxJS dynamic behavior

    This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm fo ...

随机推荐

  1. Java基础知识强化64:基本类型包装类的引入

    1. 基本类型包装类概述 (1)将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法操作该数据. (2)常用的操作的之一:用于基本数据类型与字符串之间的转换. (3)基本类型和包装类的对应 ...

  2. VritualBox 中Debian安装tool

    VritualBox 中Debian安装tool 环境 Debian 8 VirtualBox 配置Debian的源 #163源 deb http://mirrors.163.com/debian/ ...

  3. javascript sort 用法

    <html> <head> <title></title> <script type="text/javascript" sr ...

  4. 随机获取oracle数据库中的任意一行数据(rownum)

    最近看oracle资料的时候,了解rownum的概念,以前只知道对数据库表进行简单的增删改查: 看到了rownum的概念后,突然想到了好多业务场景应该都可以适用的,比如在进行随机发奖的时候, 我们就可 ...

  5. iOS 9 地图定位崩溃 n: 'Invalid parameter not satisfying: !stayUp || CLClientIsBackgroundable(internal->fClient)'

    报错详情: *** Assertion failure in -[CLLocationManager setAllowsBackgroundLocationUpdates:], /BuildRoot/ ...

  6. 一个简单C程序的汇编代码分析

    几个重要的寄存器 eip - 用于存放当前所执行的指令地址 esp - 栈(顶)指针寄存器 ebp - 基址(栈底)指针寄存器 简单的C程序 int g(int x) { ; } int f(int ...

  7. 安装hadoop2.6.0伪分布式环境

    集群环境搭建请见:http://blog.csdn.net/jediael_lu/article/details/45145767 一.环境准备 1.安装linux.jdk 2.下载hadoop2.6 ...

  8. C#邮件发送(最坑爹的邮箱-QQ邮箱)---转发(SmallFlyElephant)

    C#邮件发送(最坑爹的邮箱-QQ邮箱) 最近工作挺清闲的,有空的时候陪妹子出去玩玩,自己看看小说,看看电影,日子过的挺欢乐的,这个星期幡然悔悟,代码才是我的最爱,做点小东西,就写个邮件发送程序.说的邮 ...

  9. 环形进度条带数字显示(canvas)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. PHP内置Web Server探究(二)自定义PHP控制台输出console函数

    我们在开发APP的服务器端,当和APP进行联调时通常需要实时跟踪URL请求和参数的接收情况. 但PHP并没有像Python或Java专有的控制台输出函数,Python的print()和Java的Sys ...