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. MySQL与mabits大小比较、日期比较示例

    首先,使用mysql查询从今往后的60天数据 SELECT count(*), b1.record_date FROM nk_house_use_record AS b1, ( SELECT a.th ...

  2. SQL转换函数to_char/to_date/to_number

    日期型->字符型转换函数to_char(d [,fmt]) 函数to_char(d [,fmt])用于将日期型数值转换为字符串(varchar2类型),其中参数d用于指定日期值,fmt用于指定要 ...

  3. C#如何判断质数(转)

    要求:重复让用户输入输入一个数,判断该数是否质数,当输入“q”时,程序运行结束!(质数的判断要求用方法来实现). class Program { static void Main(string[] a ...

  4. JavaScript对象属性 constructor

     对象属性 constructor 属性返回对创建此对象的数组函数的引用; constructor(构造函数) 在对象创建或实例化时候被调用的方法.通常使用该方法来初始化数据成员和所需资源.构造函数不 ...

  5. 填坑 - 使用Entity Framework 6 + Sqlite进行DB first开发

    Sqlite团队也是渣啊,到第6代了还不支持Code First. 1.安装运行环境和组件 .安装SQLite的Visual Studio设计器支持 只有安装了它,在[新建ADO.NET实体数据模型] ...

  6. C# 解析嵌套的json文件.

    概述 今天我同学问我如何转换json文件,没处理过,网上搜了一下,json转excel的很少,反过来倒是有许多人写了工具. json文件的结构大致是这样的: {, , }, , "type& ...

  7. iOS分享 - 对象间的通信之delegate、notificationCenter与block

    在项目开发中,常常会涉及到对象之间的通信,而为了降低对象间的耦合,会采用delegate.notificationCenter.block三种方式来进行实现,对于他们的使用,也许大家都能熟练掌握,但是 ...

  8. string的一些操作，类似数组

    1.串的切割 var a="hello world";//a.length=11 alert(a.slice(3)); alert(a.substring(3)); alert(a ...

  9. C# HashSet类（复杂）对象的去重

    public class Student { public string Id { get; set; } public string Name { get; set; } public overri ...

  10. php配置文件php.ini 中文版

    ;;;;;;;;;;;;;;;; 简介 ;;;;;;;;;;;;;;;;; 本文并非是对英文版 php.ini 的简单翻译,而是参考了众多资料以后,结合自己的理解,增加了许多内容,; 包括在原有 ph ...