[RxJS] Wrap up

时间：2016-03-14 07:09:57 阅读：177 评论：0 收藏：0 [点我收藏+]

标签：

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

标签：

原文地址：http://www.cnblogs.com/Answer1215/p/5274427.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行