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. Android应用程序的安装位置

    Android应用程序的默认安装位置以及是否可移动取决于开发者在其AndroidManifest.xml中的设置:   <manifestxmlns:android="http://s ...

  2. Solr集成IK中文分词器

    1.将IKAnalyzer-2012-4x.jar拷贝到example\solr-webapp\webapp\WEB-INF\lib下: 2.在schema.xml文件中添加fieldType: &l ...

  3. Intent 意图 结构 简介

    Intent简介 官方解释: An intent is an abstract description of an operation操作 to be performed展示.表演. It can b ...

  4. 重学《C#高级编程》（继承）

    前两天重新看了<C#高级编程>里的第四章:继承与第六章:数组.OOP三大特性:封装,继承,多态,个人感觉继承是实现多态的基础,包括以后接触的设计模式,都是继承特性的衍生. 继承特性有两种, ...

  5. VS2010字体优化

    文本编辑器:Consolas 环境字体:微软雅黑

  6. Java ----------- 正则表达式（更新中。。。。。。）

    RegEx:Regular Expression. 元字符 描述 \ 将下一个字符标记符.或一个向后引用.或一个八进制转义符.例如,“\\n”匹配\n.“\n”匹配换行符.序列“\\”匹配“\”而“\ ...

  7. Fragment实现底部Tab，切换可保存状态

    activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

  8. javascript "非法值"检验.

    <script type="text/javascript"> function getCoord() { var x = document.getElementByI ...

  9. mysql 分区表详解

    项目中要一张库表实现 list分区.并且支持多种数据库. oracle 很顺利,只是mysql 听说5.1版本就已经支持了, 可是试了很多个版本,都不行,后来查到原因是要5.5 以上版本 分区才支持 ...

  10. Asp.Net--上传大文件(页面超时)

    几个方法: 修改文件上传大小的限制 以文件形式保存到服务器 转换成二进制字节流保存到数据库 将二进制通过循环的方式写入磁盘 一.修改文件上传大小的限制 通过对web.config和machine.co ...