[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.

 

Here is an example how to handle events normally:

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'.

 

If we want to remove the event listener:

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.

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:

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:

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)