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)
[Javascript + rxjs] Introducing the Observable
原文：http://www.cnblogs.com/Answer1215/p/4597872.html