zoukankan      html  css  js  c++  java
  • [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)

  • 相关阅读:
    python学习笔记—— 函数
    python学习笔记——异常
    javascript 本地数据库例子
    python学习笔记——web.py
    远程桌面连接的安装和设置
    word中如何设置页码从任意页开始
    Payoneer取人民币全过程(ATM)
    菜鸟学习四种制作Word自动生成目录的方法!
    如何设置Windows 7远程桌面连接
    Freelancer:全球最大自由职业者线上市场是如何养成的
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4597872.html
Copyright © 2011-2022 走看看