[RxJS] Wrap up

最新推荐文章于 2020-09-09 15:09:40 发布

weixin_33819479

最新推荐文章于 2020-09-09 15:09:40 发布

阅读量46

点赞数

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>

weixin_33819479

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[RxJS] Wrap up

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...
复制链接

扫一扫