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. CentOS6.x升级MySQL版本号5.1到5.6

    有一些虚拟机.云主机提供商仍然使用的是老版本号的安装套件. 预装的应用软件版本号非常低. 比方 techbrood.com 使用的云server,当中MySQL预装版本号为老版本号5.1.x. 而最新 ...

  2. 局域网指定 IP 地址后无法上网的问题

    子网掩码.默认网关.DNS 与局域网设置有关,建议指定前先 运行 cmd -> ipconfig /all 查看一下自动获取的信息. 另外留意指定IP 后需打开高级设置 -> WINS,勾 ...

  3. window成员和document成员

    输出浏览器成员和DOM成员(以下为safari浏览器测试)(浏览器不同对象成员有差异) window成员 <script type="text/javascript"> ...

  4. Dev系列控件的AJAX (转)

    介绍Dev系列控件在前台也就是客户端的一些常用方法介绍以及前后台异步通信的方法. 一.Dev Data Edit控件通用属性以及方法: 属性 1.GetEnabled():返回控件是否为可操作状态 2 ...

  5. 函数malloc的实现源代码

    /****************************************************************Copyright 1990, 1994, 2000 by AT&am ...

  6. 《第一行代码》学习笔记35-服务Service(2)

    1.Android的UI线程不安全,想要更新应用程序里的UI元素,则须在主线程中进行,否则会出现异常. 2.Android不允许在子线程里进行UI操作,对于该情况,Android提供了一套异步消息处理 ...

  7. Sql时间函数

    一.sql server日期时间函数 Sql Server中的日期与时间函数  1.  当前系统日期.时间   select getdate()    2. dateadd  在向指定日期加上一段时间 ...

  8. Codeforces Round #318(Div 1) 573A, 573B,573C

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud 这场的前两题完全是手速题...A题写了7分钟,交的时候已经500+了,好在B题出的 ...

  9. 无法更新 EntitySet“Ips_Articles”,因为它有一个 DefiningQuery,而 <ModificationFunctionMapping> 元素中没有支持当前操作的 <InsertFunction> 元素。

    今天我在使用ef的时候,发现了这样的报错. 无法更新 EntitySet“Ips_Articles”,因为它有一个 DefiningQuery,而 <ModificationFunctionMa ...

  10. AngularJS指令的作用域

    参考文章:https://segmentfault.com/a/1190000002773689