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

const starters$ = Observable.merge(

    start$.mapTo(1000),

    half$.mapTo(500),

    quarter$.mapTo(250)

);

// Clear the score box input and focus on input

starters$.subscribe( () => {

  document.querySelector('#score').innerHTML = "";

  input.value = "";

  input.focus();

})

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

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)

);

// Clear the score box input and focus on input

starters$.subscribe( () => {

  document.querySelector('#score').innerHTML = "";

  input.value = "";

  input.focus();

})

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))

const runningGame$ = timer$

    .do((x)=> console.log(x))

    .takeWhile((data)=> data.count <= 3)

    .withLatestFrom(

        input$.do((x)=> console.log(x)),

        (timer, input)=> ({count: timer.count, text: input})

    )

.share();

// To clean the input

runningGame$

  .repeat()

  .subscribe( (x) => input.value = "");

 runningGame$

    .filter((data)=> data.count === parseInt(data.text))

    .reduce((acc, curr)=> acc + 1, 0)

    .repeat()

    .subscribe(

        (x)=> document.querySelector('#score').innerHTML = `

            ${x}

        `,

        err=> console.log(err),

        ()=> console.log('complete')

    );
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.1/dist/global/Rx.umd.js"></script>

  <title>JS Bin</title>

</head>

<body>

<button id="start">Start</button>

<button id="half">Half</button>

<button id="quarter">Quarter</button>

<button id="stop">Stop</button>

<button id="reset">Reset</button>

<hr>

<input type="text" id="input">

<div>Score: <span id="score"></span></div>

</body>

</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. 在Debian Wheezy 7.3.0上编译安装3.12.14内核

    最近需要对Linux的一个内核模块进行调整实验,故决定先在虚拟机中完成编译调试工作,最后再在真实的系统上进行测试.为了防止遗忘,把过程记录于此. 1. 准备系统环境 首先从官网下载最新版的Virtua ...

  2. 学习Android MediaPlayer

    Android Media Playback 原文 The Android multimedia framework includes support for playing variety of c ...

  3. Objective-C基础之──多态

    Objective-C语言是面向对象的高级编程语言,因此,它具有面向对象编程所具有的一些特性,即:封装性.继承性和多态性. 今天介绍一下Objective-C中的多态性. 一.什么是多态 多态:不同对 ...

  4. cocos2dx 帧动画（iOS）

    植物大战僵尸的植物摇摆效果 //帧动画 Animation *animation = Animation::create(); Sprite *sprite = Sprite::create(&quo ...

  5. iOS分享 - AFNetworking之多图片/文件上传

    在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...

  6. Sudoku Killer

    算法:深搜 自从2006年3月10日至11日的首届数独世界锦标赛以后,数独这项游戏越来越受到人们的喜爱和重视. 据说,在2008北京奥运会上,会将数独列为一个单独的项目进行比赛,冠军将有可能获得的一份 ...

  7. Github提交代码及分支管理

    #提交代码cd <Cat>git initgit add .git statusgit commit -m "注释"git remote add origin < ...

  8. js深入理解"闭包"

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  9. Apache之AllowOverride参数详解

    通常利用Apache的rewrite模块对 URL 进行重写的时候, rewrite规则会写在 .htaccess 文件里.但要使 apache 能够正常的读取.htaccess 文件的内容,就必须对 ...

  10. windows下配置lamp环境(4)---安装MySQL数据库5.6

    图解安装MySQL数据库 1.获取软件就多不说了 2.双击开始安装 3.点击点击NEXT进行下一步 4.同意协议,点击NEXT进入下一步 5.选择指定安装位置安装方法,进入安装位值选择页面: 6.分别 ...