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加密的性能测试

    这是对MySQL进行加密性能测试的两篇文章系列之二.在第一篇中,我专门使用MySQL的内置的对SSL的支持来 做压力测试,产生了一些令人惊讶的结果. AD:WOT2015 互联网运维与开发者大会 热销 ...

  2. 手机软件记事本(SuperNotepad)的使用教程

    软件简介: 手机应用记事本(SuperNotepad)类似电脑应用notepad, 可用于文本阅读和编辑新建电子书(本应用限文本txt文件),是阅读小说和便签记录的好帮手. 电子书阅读器及便签的手机应 ...

  3. HID 报告描述符精细说明.

    1,报告描述符概述    1.1) 报表描述符        报表描述符和USB的其他描述符是不一样的,它不是一个简单的表格,报表描述符是USB所有描述符中最复杂的.报表描述符非常复杂而有弹性,因为它 ...

  4. Linux实现密钥登陆

    公司为了安全,一直都采用密钥登陆远程SSH,现在有了自己的服务器,自己又学者配了一把,下面就是配置笔记. 1.登陆未设置密钥的Linux服务器 2.工具新建用户密钥生成向导 3.选择生成密钥的加密方式 ...

  5. 内容观察者 ContentObserver 监听短信、通话记录数据库 挂断来电

    Activity public class MainActivity extends ListActivity {     private TextView tv_info;     private  ...

  6. HTML与CSS入门——第六章 使用字体

    知识点: 1.粗体.斜体和特殊文本格式的使用 2.字体的调整方法 3.特殊字符的使用方法 6.1 粗体.斜体和特殊文本格式: font-weight控制粗细 加粗<strong> font ...

  7. jquery获取checkbox被选中的值

    只用一个循环,就可以找出被选中的checkbox的值 var s; $("[name = b]:checkbox").each(function () {              ...

  8. WINDOWS系统下环境变量PATH和CLASSPATH的意思

    1 PATH 对于没有包含路径的命令,WINDOWS系统会默认去Windows 目录(C:\windows)和系统目录(C:\windows\system32)查找,如果没有找到,就去PATH变量内包 ...

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

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

  10. （五）JS学习笔记 - Sizzle选择器

    Sizzle词法解析 sizzle对于分组过滤处理都用正则,其中都有一个特点,就是都是元字符^开头,限制匹配的初始,所以tokenize也是从左边开始一层一层的剥离. •可能会应用到正则如下: // ...