[RxJS] Adding Conditional Logic with Filter
2016-03-11 15:30
381 查看
Often you only want values to proceed through your stream if they meet certain criteria, just as if you were using an
ifstatement in plain JavaScript. This lesson shows you how to use
filteron your stream to only push the values that you need through your stream.
const Observable = Rx.Observable; const startButton = document.querySelector('#start'); const halfButton = document.querySelector('#half'); const quarterButton = document.querySelector('#quarter'); const stopButton = document.querySelector('#stop'); const resetButton = document.querySelector('#reset'); const input = document.querySelector('#input'); const start$ = Observable.fromEvent(startButton, 'click'); const half$ = Observable.fromEvent(halfButton, 'click'); const quarter$ = Observable.fromEvent(quarterButton, 'click'); const stop$ = Observable.fromEvent(stopButton, 'click'); const reset$ = Observable.fromEvent(resetButton, 'click'); const input$ = Observable.fromEvent(input, 'input') .map(event => event.target.value); const data = {count:0}; const inc = (acc)=> ({count: acc.count + 1}); const reset = (acc)=> data; const starters$ = Observable.merge( start$.mapTo(1000), half$.mapTo(500), quarter$.mapTo(250) ); const intervalActions = (time)=> Observable.merge( Observable.interval(time) .takeUntil(stop$).mapTo(inc), reset$.mapTo(reset) ); const timer$ = starters$ .switchMap(intervalActions) .startWith(data) .scan((acc, curr)=> curr(acc)) Observable.combineLatest( timer$, input$, (timer, input)=> ({count: timer.count, text: input}) ) .filter((data)=> data.count === parseInt(data.text)) .subscribe( (x)=> console.log(x), err=> console.log(err), ()=> console.log('complete') );
相关文章推荐
- json 和jsonp
- [转]backbone.js 示例 todos
- JS核心语法基础
- js面向对象之公有、私有、静态属性和方法详解
- Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理
- js获取系统月份大小总是小一位
- javascript中的面向对象的第一点:原型和构造函数的重要性
- [转]Backbone.js简单入门范例
- JavaScript获取图片像素颜色并转换为box-shadow显示
- javascript基础笔记
- 【前端】javascript判断undefined、null、NaN;字符串包含等
- JavaScript 元素的插入顺序以及动态加载js
- js垃圾收集
- JavaScript跨域总结与解决办法
- Ajax 传递json字符串到客户端时报 Internal server error
- Js new的本质
- JS dom对象
- JS window.open()属性
- 生成jsp验证码的代码详解(servlet版)
- Jsp页面报错状态码含义