zoukankan      html  css  js  c++  java
  • [Javascript + rxjs] Using the map method with Observable

    Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

    var Observable = Rx.Observable;
    
    //Create click events by Observable
    var clicks = Observable.fromEvent(button, 'click');
    var points = clicks.map(function(e) {
        return {x: e.clientX, y: e.clientY};
    });
    
    //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 = points.forEach(function onNext(point) {
        console.log('clicked:' + JSON.stringify(point));
        //subscription.dispose();
    }, function onError() {
        console.log('error');
    }, function onCompleted() {
        console.log('complete');
    });

    We change forEach method on points:

    var subscription = points.forEach(function onNext(point) {

    So it print out each click's position.

    var points = clicks.map(function(e) {
        return {x: e.clientX, y: e.clientY};
    });

    creates another Observable object, remember once you use observable object to generate another object by foreach, map or concatAll method, this object would be observable.

    observable is lazy:

    If we comment out this part of code:

    /*var subscription = points.forEach(function onNext(point) {
        console.log('clicked:' + JSON.stringify(point));
        //subscription.dispose();
    }, function onError() {
        console.log('error');
    }, function onCompleted() {
        console.log('complete');
    });*/

    Then you click the button, nothing happend. 

    As a matter of fact, addEventListener, under the hood, has not even been called by Observable.fromEvent.

    The way Observable works is it waits until you call forEach to have any side effects, to carry out any side effects whatsoever. What we've done is we've really just built an Observable that promises that when you will call forEach on it, it will hook up an event listener.

    When we map over that Observable, we've created another Observable that promises that when we forEach over it, it will forEach over the underlying data source, clicks, and then, as data arrives, will transform that data, using a projection function, into new data. Just simply creating Observables causes nothing to happen.

    We have to forEach over the Observable in order for something to happen. 

  • 相关阅读:
    springMVC 返回json 忽略类中属性的注解
    MySQL中函数CONCAT及GROUP_CONCAT
    ArrayList转成HashMap再转成LinkedHashMap 自己的解决方案
    easyui datebox 设置不可编辑
    js或jquery如何获取父级、子级、兄弟元素(包括祖级、孙级等)
    关于js中空值比较和传值的问题
    Tomcat报错:Failed to start component [StandardEngine[Catalina].StandardHost[localhost]]
    JQuery 阻止js事件冒泡 阻止浏览器默认操作
    visualstudio2017 +EF+Mysql生成实体数据模型闪退
    MVC错误:查询的结果不能枚举多次
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4599084.html
Copyright © 2011-2022 走看看