rxjs-demo-1

rxjs-demo-1

by 兵兵 王

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.min.js"></script>
<link rel="stylesheet" href="https://odfi55g2o.bkt.clouddn.com/log.css">
<script src="https://odfi55g2o.bkt.clouddn.com/log.js"></script>
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<button id="button4">button4</button>

Babel + JSX

log.init();

var button = document.querySelector('#button1');
button.addEventListener('click', () => log.log('Clicked!'));

var button2 = document.querySelector('#button2');
Rx.Observable.fromEvent(button2, 'click')
	.subscribe(() => log.log('Clicked!'));
    
var button3 = document.querySelector('#button3');
Rx.Observable.fromEvent(button3, 'click')
  	.scan(count => count + 1, 0)
  	.subscribe(count => log.log(`Clicked ${count} times`));
  
var button4 = document.querySelector('#button4');
Rx.Observable.fromEvent(button4, 'click')
    .throttleTime(1000)
    .scan((count) => count + 1, 0)
    .subscribe(count => log.log(count));
    
var observable = Rx.Observable.create(function (observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
        observer.next(4);
        observer.complete();
        observer.next(5);
    }, 1000);
});

log.log('just before subscribe');
observable.subscribe({
    next: x => log.log('got value ' + x),
    error: err => log.log('something wrong occurred: ' + err),
    complete: () => log.log('done'),
});
log.log('just after subscribe');