Rxjs

In responsive programming, observable may be a successor to promise

Reactivex = observer mode with iterator + function programming with set to manage sequential events.

Rxjs core

• Observable represents a collection of callable expected values or events
• Observer a collection of callbacks that know how to listen for values passed by observable
• Subscription determines whether observable output value can be cancelled
• Operators pure function
• Subject is equivalent to event generator EventEmitter, which broadcasts events or values
• Schedulers control concurrent central dispatchers, which can coordinate parallel computing with setTimeout or request animation frame or other methods

analysis

Similar to promise, it is generally not available now, but based on the event programming that can be expected in the future. However, observable multi value can be cancelled and processed.

Observable looks like a producer, but only when you call subscribe

Examples

js

document.addEventListener('click', () => console.log('Clicked!'));

rxjs

import { fromEvent } from 'rxjs';

fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));

flow

js

let count = 0;
let rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

rxjs

import { fromEvent } from 'rxjs';
import { throttleTime, scan } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
    throttleTime(1000),
    scan(count => count + 1, 0)
  )
  .subscribe(count => console.log(`Clicked ${count} times`));

This work adoptsCC agreementReprint must indicate the author and the link of this article