[RxJS] Basic DOM Rendering with Subscribe

最新推荐文章于 2025-08-05 17:55:38 发布

weixin_33725272

最新推荐文章于 2025-08-05 17:55:38 发布

阅读量58

点赞数

文章标签： javascript ViewUI

本文展示了如何在不依赖框架的情况下，手动更新DOM并使用订阅块进行计时操作，实现基本的计数功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscriptions for you, this lesson shows how you can still do basic subscribe blocks and manually update the DOM on your own.

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)
);

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))


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})
    )
    .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')
    );