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. [小技巧][ASP.Net MVC Hack] 使用 HTTP 报文中的 Header 字段进行身份验证

    在一些 Web 系统中,身份验证是依靠硬件证书进行的:在电脑上插入 USB 证书,浏览器插件读取证书的相关信息,然后在发送 HTTP 登录请求时顺便在 Header 字段附加上身份信息.服务器端处理这 ...

  2. DefaultResouceLoader的设计

    它是什么 DefaultResourceLoader是Spring中的ResourceLoader的默认实现类,也是AbstractApplicationContext的父类,它也可以单独使用,用来从 ...

  3. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  4. iOS_SN_CocoaPods使用详细说明( 转)

    一.概要 iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三方库. 二.安装 由于 ...

  5. js获取鼠标选中的文字

    1.获取选中的文字: document.selection.createRange().text; IE9以下使用 window.getSelection().toString(); 其他浏览器使用 ...

  6. document 写法

    # UfsProgressBar ## Component InfoA progress bar component of specified progress. ## Usage```<ufs ...

  7. JavaScript键盘事件全面控制代码

    JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...

  8. 关于 VS2013监视窗口的内存面板及寄存器面板

    1.插入断点,按F5调试,2.选择菜单项 debug-窗口-3.即可找到您要的监视窗口.

  9. C/C++ char和int的区别

    字符字面值一般是用一对单引号来表示.char类型一般就是用字符字面值来初始化.赋值.由于char类型的是单字节长度,当给char类型的变量用字符字面值赋值时,当单引号里面的内容超过一个字节时,系统会自 ...

  10. delegate,notifucation,KVO三种模式实现通信的优缺点

             在开发ios应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前提下,controllers间怎么进行通信.在IOS应用不断的出现三种模式来实现这种通信: 1.委托delega ...