In currently implemention, there is one problem, when the page load and click refresh button, the user list is not immediatly clean up,it is cleared after the new data come in.

So two things we need to do,

1. Hide User Elements when the user object is null

2. clean the list when page first load

3. clean the list after each refresh click

1. In the renderSuggestion method, check the suggestedUser is null or not, if it is null, then we hide the user item.

function renderSuggestion(suggestedUser, selector) {
var suggestionEl = document.querySelector(selector);
if (suggestedUser === null) {
suggestionEl.style.visibility = 'hidden';
} else {
suggestionEl.style.visibility = 'visible';
var usernameEl = suggestionEl.querySelector('.username');
usernameEl.href = suggestedUser.html_url;
usernameEl.textContent = suggestedUser.login;
var imgEl = suggestionEl.querySelector('img');
imgEl.src = "";
imgEl.src = suggestedUser.avatar_url;
}
}

2. So when the page load, you can see the frash, because we have placeholder in the html:

    <ul class="suggestions">
<li class="suggestion1">
<img />
<a href="#" target="_blank" class="username">this will not be displayed</a>
<a href="#" class="close close1">x</a>
</li>
<li class="suggestion2">
<img />
<a href="#" target="_blank" class="username">neither this</a>
<a href="#" class="close close2">x</a>
</li>
<li class="suggestion3">
<img />
<a href="#" target="_blank" class="username">nor this</a>
<a href="#" class="close close3">x</a>
</li>
</ul>

When the data comes in, it will be replaced with data, it will be obvious when the low speed internet.

SO in the createSuggestion method, we use startWith(null), it set suggestionUser to null:

function createSuggestionStream(responseStream) {
return responseStream.map(listUser =>
listUser[Math.floor(Math.random()*listUser.length)]
)
.startWith(null);
}

This will solve the problem when first loading, the user list frashing...

3. In each responseStream, we merge with refreshClickStream and return null value. Because network request take time to finish, so the null value will effect the responseStream first, so the user item can be hided.

function createSuggestionStream(responseStream) {
return responseStream.map(listUser =>
listUser[Math.floor(Math.random()*listUser.length)]
)
.startWith(null)
.merge(refreshClickStream.map(ev => null));
}
//----r---------------------r---------->
// startWith(N)
//N---r------------------------------->
//------------------N-----N----------->
// merge
//N---r-----------------r---r---------->
//

--------------------------

var refreshButton = document.querySelector('.refresh');

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

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

var requestOnRefreshStream = refreshClickStream
.map(ev => {
var randomOffset = Math.floor(Math.random()*500);
return 'https://api.github.com/users?since=' + randomOffset;
}); var responseStream = startupRequestStream.merge(requestOnRefreshStream)
.flatMap(requestUrl =>
Rx.Observable.fromPromise(jQuery.getJSON(requestUrl))
); function createSuggestionStream(responseStream) {
return responseStream.map(listUser =>
listUser[Math.floor(Math.random()*listUser.length)]
)
.startWith(null)
.merge(refreshClickStream.map(ev => null));
} var suggestion1Stream = createSuggestionStream(responseStream);
var suggestion2Stream = createSuggestionStream(responseStream);
var suggestion3Stream = createSuggestionStream(responseStream); // Rendering ---------------------------------------------------
function renderSuggestion(suggestedUser, selector) {
var suggestionEl = document.querySelector(selector);
if (suggestedUser === null) {
suggestionEl.style.visibility = 'hidden';
} else {
suggestionEl.style.visibility = 'visible';
var usernameEl = suggestionEl.querySelector('.username');
usernameEl.href = suggestedUser.html_url;
usernameEl.textContent = suggestedUser.login;
var imgEl = suggestionEl.querySelector('img');
imgEl.src = "";
imgEl.src = suggestedUser.avatar_url;
}
} suggestion1Stream.subscribe(user => {
renderSuggestion(user, '.suggestion1');
}); suggestion2Stream.subscribe(user => {
renderSuggestion(user, '.suggestion2');
}); suggestion3Stream.subscribe(user => {
renderSuggestion(user, '.suggestion3');
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.8/rx.all.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="header">
<h3>Who to follow</h3><a href="#" class="refresh">Refresh</a>
</div>
<ul class="suggestions">
<li class="suggestion1">
<img />
<a href="#" target="_blank" class="username">this will not be displayed</a>
<a href="#" class="close close1">x</a>
</li>
<li class="suggestion2">
<img />
<a href="#" target="_blank" class="username">neither this</a>
<a href="#" class="close close2">x</a>
</li>
<li class="suggestion3">
<img />
<a href="#" target="_blank" class="username">nor this</a>
<a href="#" class="close close3">x</a>
</li>
</ul>
</div>
</body>
</html>

[RxJS] Reactive Programming - Clear data while loading with RxJS startWith()的更多相关文章

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

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

  2. [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js

    Streams give you the power to handle a "pending" state where you've made a request for dat ...

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

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

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

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

  6. [RxJS] Reactive Programming - New requests from refresh clicks -- merge()

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

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

  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版)-创建型模式之简单工厂模式

    前言:这段时间在学习设计模式,本人也是小菜一枚(所以写的如果有错误的地方请大大们给予指出).这个东西也是我一直想学习的,从点点滴滴做起,记录下自己每天的领悟! 一.工厂模式的动机 在软件系统中,经常面 ...

  2. DOM中的NodeList与HTMLCollection

    最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于N ...

  3. 基本 XAML 语法指南

    我们介绍了 XAML 语法规则,以及用于描述 XAML 语法中存在的限制或选项的术语.当出现以下情况时你会发现本主题很有用:不熟悉 XAML 语言的使用,希望加强对术语或某些语法部分的理解,或者对 X ...

  4. bootstrap-datetimepicker使用记录

    版本:V2.0 1.bootstrap-datetimepicker.min.css 2.bootstrap-datetimepicker.min.js 3.bootstrap-datetimepic ...

  5. [Leetcode][001] Two Sum (Java)

    题目在这里: https://leetcode.com/problems/two-sum/ [标签]Array; Hash Table [个人分析] 这个题目,我感觉也可以算是空间换时间的例子.如果是 ...

  6. MySql中查询表中的列名

    例如我的数据库名为"example",使用 USE example; 确定使用example数据库.使用 show tables; 显示数据库中的所有表.使用 DESC perso ...

  7. C语言基础学习基本数据类型-int类型与int变量

    int类型与int变量 针对不同的用途,C语言提供了多种整数类型.各种整数类型的区别在于所提供数值的范围,以及数值是否可以取负值. 在之前的实例中你已经看到过,int关键字用于声明整型变量. int类 ...

  8. 窗口!窗口!- Windows程序设计(SDK)003

    窗口!窗口! 让编程改变世界 Change the world by program 内容节选: 在前边两节课的例子中,我们通过 MessageBox 函数创建一个消息框程序,消息框其实就是用来跟用户 ...

  9. ios开发之常用宏的定义

    有些时候,我们需要将代码简洁化,这样便于读代码.我们可以将一些不变的东东抽取出来,将变化的东西作为参数.定义为宏,这样在写的时候就简单多了. 下面例举了一些常用的宏定义和大家分享: 1. 判断设备的操 ...

  10. AES CBC 128的实现

    原由 AES已经变成目前对称加密中最流行算法之一,AES可以使用128.192.和256位密钥,并且用128位分组加密和解密数据. 项目中需要使用AES对密码信息进行加密,由嵌入式设备使用C语言进行加 ...