See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect double clicks with a few operators in RxJS.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="header">
<a href="#" class="button">BUTTON</a><h4>-</h4>
</div>
</body>
</html>
var button = document.querySelector('.button');
var h4 = document.querySelector('h4'); var clicks = Rx.Observable.fromEvent(button, 'click');
var doubleClicks = clicks
.buffer(() => clicks.throttle(250)) // buffer the events, for each event debounce 250ms and group together
.map(arr => arr.length) // for each group, count the lengh of event
.filter(x => x ===2); // only pick length === 2 which means double click var res = doubleClicks.subscribe( () => {
h4.textContent = "double click"
}); doubleClicks.throttle(1000).subscribe(() => {
h4.textContent = "-";
});

[Reactive Programming] Using an event stream of double clicks -- buffer()的更多相关文章

  1. "reactive programming"的概念

    下面的内容大多是翻译来的. Reactive Programming? What is Reactive Programming? 为了了解Reactive——从编程范式至其背后的动机,有必要了解现在 ...

  2. "Principles of Reactive Programming" 之 <Persistent Actor State>学习笔记

    这是<Pinciples of Reactive Programming>week6的最后一课. 为什么需要把actor的状态持久化? 如果actor没有状态,那么在任何实时,这个acto ...

  3. [RxJS] Reactive Programming - What is RxJS?

    First thing need to understand is, Reactive programming is dealing with the event stream. Event stre ...

  4. Reactive Programming

    Reactive的表现 Reactive 规范是 JVM Reactive 扩展规范 Reactive Streams JVM,而 Reactive 实现框架则是最典型的实现: Reactive St ...

  5. .Net中的反应式编程(Reactive Programming)

    系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LI ...

  6. Unity基于响应式编程(Reactive programming)入门

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

  7. ReactiveCocoa与Functional Reactive Programming

    转自 http://blog.leezhong.com/ios/2013/06/19/frp-reactivecocoa.html Functional Reactive Programming(以下 ...

  8. 指路Reactive Programming

    指路Reactive Programming Mar 02, 2016 in Engineering 我在工作中采用Reactive Programming(RP)已经有一年了,对于这个“新鲜”的辞藻 ...

  9. Functional Reactive Programming

    Functional Reactive Programming (FRP) integrates time flow and compositional events into functional ...

随机推荐

  1. nginx 基础文档

    Nginx基础 1.  nginx安装 2.  nginx 编译参数详解 3.  nginx安装配置+清缓存模块安装 4.  nginx+PHP 5.5 5.  nginx配置虚拟主机 6.  ngi ...

  2. gcc/g++命令认识

    gcc & g++是gnu中最主要和最流行的c & c++编译器 . g++用来针对c++的处理命令,以.cpp为后缀,对于c语言后缀名一般为.c.这时候命令换做gcc即可. 下面以T ...

  3. bzoj 2115: [Wc2011] Xor xor高斯消元

    2115: [Wc2011] Xor Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 797  Solved: 375[Submit][Status] ...

  4. java 伪共享

    MESI协议及RFO请求典型的CPU微架构有3级缓存, 每个核都有自己私有的L1, L2缓存. 那么多线程编程时, 另外一个核的线程想要访问当前核内L1, L2 缓存行的数据, 该怎么办呢?有人说可以 ...

  5. 【HTTP】HTTP access control (CORS)

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS Cross-site HTTP requests are H ...

  6. 集群-Session解决方案

    在集群中session安全和同步是个最大的问题,下面是收集到的几种session同步的方案,希望能通过分析其各自的优劣找出其适应的场景. 1. 客户端cookie加密 简单,高效.比较好的方法是自己采 ...

  7. 当一个控件属性不存在的时候,IDE会出错在这里

    procedure TWinControl.ReadState(Reader: TReader); begin DisableAlign; try inherited ReadState(Reader ...

  8. 设计模式之(三)Proxy模式

    今天学习Proxy模式.代理模式是在对已有对象操作困难或者不太方便时,选择用代理的方式对对象进行访问.Proxy实现的方法必须和被代理对象一致. 举一个简单的例子, 有一个Math类实现了IMath接 ...

  9. Bluetooth LE(低功耗蓝牙) - 第六部分(完)

    在本系列前面的文章中我们已经了解了,在我们从一个TI SensorTag中获取温度和湿度数据之前,我们需要经历的各种步骤.在本系列中的最后一篇文章,我们将完成注册并接收SensorTag的通知,并接收 ...

  10. 【HDOJ】1823 Luck and Love

    二维线段树.wa了几次,不存在输出-1,而不再是一位小数. #include <cstdio> #include <cstring> #define MAXN 105 #def ...