Last thing to do is clean the score box and input, also auto foucs on input when click start.

  1. const starters$ = Observable.merge(
  2.     start$.mapTo(1000),
  3.     half$.mapTo(500),
  4.     quarter$.mapTo(250)
  5. );
  6.  
  7. // Clear the score box input and focus on input
  8. starters$.subscribe( () => {
  9.   document.querySelector('#score').innerHTML = "";
  10.   input.value = "";
  11.   input.focus();
  12. })

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

  1. const Observable = Rx.Observable;
  2.  
  3. const startButton = document.querySelector('#start');
  4. const halfButton = document.querySelector('#half');
  5. const quarterButton = document.querySelector('#quarter');
  6.  
  7. const stopButton = document.querySelector('#stop');
  8. const resetButton = document.querySelector('#reset');
  9.  
  10. const input = document.querySelector('#input');
  11.  
  12. const start$ = Observable.fromEvent(startButton, 'click');
  13. const half$ = Observable.fromEvent(halfButton, 'click');
  14. const quarter$ = Observable.fromEvent(quarterButton, 'click');
  15.  
  16. const stop$ = Observable.fromEvent(stopButton, 'click');
  17. const reset$ = Observable.fromEvent(resetButton, 'click');
  18.  
  19. const input$ = Observable.fromEvent(input, 'input')
  20.     .map(event => event.target.value);
  21.  
  22. const data = {count:0};
  23. const inc = (acc)=> ({count: acc.count + 1});
  24. const reset = (acc)=> data;
  25.  
  26. const starters$ = Observable.merge(
  27.     start$.mapTo(1000),
  28.     half$.mapTo(500),
  29.     quarter$.mapTo(250)
  30. );
  31.  
  32. // Clear the score box input and focus on input
  33. starters$.subscribe( () => {
  34.   document.querySelector('#score').innerHTML = "";
  35.   input.value = "";
  36.   input.focus();
  37. })
  38.  
  39. const intervalActions = (time)=> Observable.merge(
  40.     Observable.interval(time)
  41.         .takeUntil(stop$).mapTo(inc),
  42.     reset$.mapTo(reset)
  43. );
  44.  
  45. const timer$ = starters$
  46.     .switchMap(intervalActions)
  47.     .startWith(data)
  48.     .scan((acc, curr)=> curr(acc))
  49.  
  50. const runningGame$ = timer$
  51.     .do((x)=> console.log(x))
  52.     .takeWhile((data)=> data.count <= 3)
  53.     .withLatestFrom(
  54.         input$.do((x)=> console.log(x)),
  55.         (timer, input)=> ({count: timer.count, text: input})
  56.     )
  57. .share();
  58.  
  59. // To clean the input
  60. runningGame$
  61.   .repeat()
  62.   .subscribe( (x) => input.value = "");
  63.  
  64.  runningGame$
  65.     .filter((data)=> data.count === parseInt(data.text))
  66.     .reduce((acc, curr)=> acc + 1, 0)
  67.     .repeat()
  68.     .subscribe(
  69.         (x)=> document.querySelector('#score').innerHTML = `
  70.             ${x}
  71.         `,
  72.         err=> console.log(err),
  73.         ()=> console.log('complete')
  74.     );
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.1/dist/global/Rx.umd.js"></script>
  7.   <title>JS Bin</title>
  8. </head>
  9. <body>
  10.  
  11. <button id="start">Start</button>
  12. <button id="half">Half</button>
  13. <button id="quarter">Quarter</button>
  14. <button id="stop">Stop</button>
  15. <button id="reset">Reset</button>
  16.  
  17. <hr>
  18.  
  19. <input type="text" id="input">
  20.  
  21. <div>Score: <span id="score"></span></div>
  22.  
  23. </body>
  24. </html>

[RxJS] Wrap up的更多相关文章

  1. [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js

    A Promise invokes a function which stores a value that will be passed to a callback. So when you wra ...

  2. RxJS + Redux + React = Amazing!（译一）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  3. RxJS + Redux + React = Amazing!（译二）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  4. jQuery之常用且重要方法梳理（siblings,nextAll,end,wrap,apply,call,each）-（二）

    1.siblings() siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. <body> <div><span>Hello</ ...

  5. [译]RxJS 5.X基础篇

    欢迎指错与讨论 : ) 当前RxJS版本:5.0.0-beta.10.更详细的内容尽在RxJS官网http://reactivex.io/rxjs/manual/overview.html.文章比较长 ...

  6. [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

    原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul>   <li title='苹果'>苹果</li>   ...

  7. 学习RxJS： 导入

    原文地址:http://www.moye.me/2016/05/31/learning_rxjs_part_one_preliminary/ 引子 新手们在异步编程里跌倒时,永远会有这么一个经典问题: ...

  8. 【golang】go语言，进行并发请求的wrap变参封装

    package main import ( "fmt" "sync" "time" ) type WaitGroupWrapper stru ...

  9. jquery之wrap(),wrap(),unwrap()方法详解

    [注]wrap():为每个匹配元素外面添加指定的HTML结构, wrapAll(): 为所有匹配元素(作为一个整体)外面添加一个指定的HTML结构 原文地址:http://www.365mini.co ...

随机推荐

  1. 自定义PopupWindow动画效果

    public class RollActivity extends Activity { private View view; private Button btn; private PopupWin ...

  2. XAML 命名空间和命名空间映射

    本主题将介绍大部分 XAML 文件的根元素中存在的 XML/XAML 命名空间 (xmlns) 映射.它还将介绍如何为自定义类型和程序集生成类似的映射. XAML 命名空间如何与代码定义和类型库相关 ...

  3. Oracle 11g XML java连接

    在网上找了好多教程 走好好多弯路 现在从头总结下 oralce11g 可以直接用xmltype节点存储xml文件 简单来说就是直接存一个文件进去 首先安装oracle11g 网上教程非常多 然后进Ne ...

  4. java中包的应用

    Do2.java package mypack; class Do2 { public static void main(String[] args) { packa.Do3 d=new packa. ...

  5. Matlab 取子矩阵

    MATLAB如何提取矩阵的子块 在matlab中如何提取一个矩阵的部分元素 1.提取大矩阵的一列.一行元素: 一列元素:  A(:,j)表示提取A矩阵的第j列全部元素 一行元素:  A(i,:)表示提 ...

  6. mysql 5.7.9(GA) 安装

    mysql 5.7.9(GA) 终于发布了,感受一下. 一.下载 下载页面 http://dev.mysql.com/downloads/mysql/ 选择相应系统的版本下载. 本文OS为centos ...

  7. 在git bush中如何退出vim编辑器

    写npm的pakege.json文件的files配置时,如果有不想包含的文件,那就要创建.npmignore文件排除,但windows系统又不允许创建以点开头命名的文件,咋办? 这时候就要用到linu ...

  8. jQuery对下拉框、单选框、多选框的处理

    下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]&quo ...

  9. centos6 安装 lamp

    首先更新一下yum -y update 安装Apache yum install httpd httpd-devel 安装完成后,用/etc/init.d/httpd start 启动apache 设 ...

  10. iOS知识点全梳理-备用

    感谢大神分享 文/Jack_lin(简书作者)原文链接:http://www.jianshu.com/p/5d2163640e26著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 序言 ...