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)

  • 相关阅读:
    init进程解析rc文件的相关函数分析
    Ubuntu 安装Android Studio与使用手册
    Vim的撤销与重做
    Vim 配色设置与配色脚本语法
    js常用的语句
    xshell常用的命令
    java常用的语句
    maven工程配置日志
    根据一个oss的pdf文件的 地址转换成一个File文件
    根据一个oss的地址把图片转换成一个文件
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4597872.html
Copyright © 2011-2022 走看看