[Javascript + rxjs] Introducing the Observable

In this lesson we will get introduced to the Observable type. An Observable is a collection that arrives over time. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.html

 

Here is an example how to handle events normally:git

var button = document.getElementById('button');

var handler = function(e){
    console.log('clicked');
};

button.addEventListener('click', handler);

So when fire the click event, in the console will log 'clicked'.github

 

If we want to remove the event listener:express

var button = document.getElementById('button');

var handler = function(e){
    console.log('clicked');
    button.removeEventListener('click', handler);
};

button.addEventListener('click', handler);

 

Now let see how can we achieve the same effect by using observable.api

var Observable = Rx.Observable;

//Create click events by Observable
var clicks = Observable.fromEvent(button, 'click');

//Then we are able to use forEach, concatAll, map, fliter function
clicks.forEach(function() {
    console.log('clicked');
});

 

How to remove the event listener:less

var Observable = Rx.Observable;

//Create click events by Observable
var clicks = Observable.fromEvent(button, 'click');

//Then we are able to use forEach, concatAll, map, fliter function
//The function return an subscription object, which we can use to call dispose() method to remove listener
var subscription = clicks.forEach(function() {
    console.log('clicked');
    subscription.dispose();
});

 

forEach method actually has three callback function which are onNext, onError, onCompleted:async

var Observable = Rx.Observable;

//Create click events by Observable
var clicks = Observable.fromEvent(button, 'click');

//Then we are able to use forEach, concatAll, map, fliter function
//The function return an subscription object, which we can use to call dispose() method to remove listener
var subscription = clicks.forEach(function onNext() {
    console.log('clicked');
    subscription.dispose();
}, function onError() {
    console.log('error');
}, function onCompleted() {
    console.log('complete');
});

 

[doc](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md)post