[RxJS] Changing Behavior with MapTo
2016-03-09 22:38
796 查看
You often need streams to trigger different behaviors on the data based on which streams triggers. This lessons shows how to use
Current Code:
Everytime the number 1,2,3... will be passed to the scan function.
If we want scan() method be fixable enought, we can use mapTo() method, which accecpts a function to increase the number. Then we need to modify the scan() function, now everytime it receive is the function return from mapTo, not a number anymore.
Now we get full control over the scan() method, we can let it reset after 10:
mapToto pass functions into the
scanoperator and have completed control over you data.
Current Code:
const Observable = Rx.Observable; const startButton = document.querySelector('#start'); const stopButton = document.querySelector('#stop'); const start$ = Observable.fromEvent(startButton, 'click'); const interval$ = Observable.interval(1000); const stop$ = Observable.fromEvent(stopButton, 'click'); const intervalThatStops$ = interval$ .takeUntil(stop$); const inc = (acc) => ({count: acc.count + 1}); // one line arrow function only ruturn object need () const data = {count: 0}; start$ .switchMapTo(intervalThatStops$) .startWith(data) .scan( inc ) .subscribe((x)=> console.log(x));
Everytime the number 1,2,3... will be passed to the scan function.
If we want scan() method be fixable enought, we can use mapTo() method, which accecpts a function to increase the number. Then we need to modify the scan() function, now everytime it receive is the function return from mapTo, not a number anymore.
start$ .switchMapTo(intervalThatStops$) .mapTo( inc ) .startWith(data) .scan( (acc, curr) => { console.log(curr); //(acc) => ({count: acc.count + 1})return curr(acc) } ) .subscribe((x)=> console.log(x));
Now we get full control over the scan() method, we can let it reset after 10:
const Observable = Rx.Observable; const startButton = document.querySelector('#start'); const stopButton = document.querySelector('#stop'); const start$ = Observable.fromEvent(startButton, 'click'); const interval$ = Observable.interval(200); const stop$ = Observable.fromEvent(stopButton, 'click'); const intervalThatStops$ = interval$ .takeUntil(stop$); const data = {count: 0}; const inc = (acc) => { return Object.assign({}, data, {count: count + 1})}; // avoid modifying data object const resetAfterTen = (acc) => { if(acc.count == 10){ return data; }else{ return Object.assign({}, acc, {count: acc.count + 1}) } } start$ .switchMapTo(intervalThatStops$) .mapTo( resetAfterTen ) .startWith(data) .scan( (acc, curr) => { return curr(acc) } ) .subscribe((x)=> console.log(x));
相关文章推荐
- JSP和Servlet的区别
- EXTJS 5 学习笔记2 - Components
- EXTJS 5 学习笔记1 - Class System
- js库Modernizr的介绍和使用
- Javascript的精华啊【如果以后我看到了或者想到了再继续补吧】
- jsp连接数据
- Javascript之this对象初解
- OC与JS互相调用
- Javascript动态调用css样式表
- 训练趣题:黑与白 有A、B、C、D、E五人,每人额头上都帖了一张黑或白的纸。(此处用javascript实现)
- js的抽象方法
- JavaScript实现表单的分向提交
- 对JS原型的一些理解
- js原生拖放
- 重读JSON
- DBHepler实现简jsp单登陆
- JS中的Json和String的转换
- javascript验证用户登录信息
- 学习Javascript闭包(Closure)
- jsp变量的使用规则