[Reactive Programming] Using an event stream of double clicks -- buffer()
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()的更多相关文章
- "reactive programming"的概念
下面的内容大多是翻译来的. Reactive Programming? What is Reactive Programming? 为了了解Reactive——从编程范式至其背后的动机,有必要了解现在 ...
- "Principles of Reactive Programming" 之 <Persistent Actor State>学习笔记
这是<Pinciples of Reactive Programming>week6的最后一课. 为什么需要把actor的状态持久化? 如果actor没有状态,那么在任何实时,这个acto ...
- [RxJS] Reactive Programming - What is RxJS?
First thing need to understand is, Reactive programming is dealing with the event stream. Event stre ...
- Reactive Programming
Reactive的表现 Reactive 规范是 JVM Reactive 扩展规范 Reactive Streams JVM,而 Reactive 实现框架则是最典型的实现: Reactive St ...
- .Net中的反应式编程(Reactive Programming)
系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LI ...
- Unity基于响应式编程(Reactive programming)入门
系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...
- ReactiveCocoa与Functional Reactive Programming
转自 http://blog.leezhong.com/ios/2013/06/19/frp-reactivecocoa.html Functional Reactive Programming(以下 ...
- 指路Reactive Programming
指路Reactive Programming Mar 02, 2016 in Engineering 我在工作中采用Reactive Programming(RP)已经有一年了,对于这个“新鲜”的辞藻 ...
- Functional Reactive Programming
Functional Reactive Programming (FRP) integrates time flow and compositional events into functional ...
随机推荐
- nginx 基础文档
Nginx基础 1. nginx安装 2. nginx 编译参数详解 3. nginx安装配置+清缓存模块安装 4. nginx+PHP 5.5 5. nginx配置虚拟主机 6. ngi ...
- gcc/g++命令认识
gcc & g++是gnu中最主要和最流行的c & c++编译器 . g++用来针对c++的处理命令,以.cpp为后缀,对于c语言后缀名一般为.c.这时候命令换做gcc即可. 下面以T ...
- bzoj 2115: [Wc2011] Xor xor高斯消元
2115: [Wc2011] Xor Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 797 Solved: 375[Submit][Status] ...
- java 伪共享
MESI协议及RFO请求典型的CPU微架构有3级缓存, 每个核都有自己私有的L1, L2缓存. 那么多线程编程时, 另外一个核的线程想要访问当前核内L1, L2 缓存行的数据, 该怎么办呢?有人说可以 ...
- 【HTTP】HTTP access control (CORS)
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS Cross-site HTTP requests are H ...
- 集群-Session解决方案
在集群中session安全和同步是个最大的问题,下面是收集到的几种session同步的方案,希望能通过分析其各自的优劣找出其适应的场景. 1. 客户端cookie加密 简单,高效.比较好的方法是自己采 ...
- 当一个控件属性不存在的时候，IDE会出错在这里
procedure TWinControl.ReadState(Reader: TReader); begin DisableAlign; try inherited ReadState(Reader ...
- 设计模式之（三）Proxy模式
今天学习Proxy模式.代理模式是在对已有对象操作困难或者不太方便时,选择用代理的方式对对象进行访问.Proxy实现的方法必须和被代理对象一致. 举一个简单的例子, 有一个Math类实现了IMath接 ...
- Bluetooth LE(低功耗蓝牙) - 第六部分(完)
在本系列前面的文章中我们已经了解了,在我们从一个TI SensorTag中获取温度和湿度数据之前,我们需要经历的各种步骤.在本系列中的最后一篇文章,我们将完成注册并接收SensorTag的通知,并接收 ...
- 【HDOJ】1823 Luck and Love
二维线段树.wa了几次,不存在输出-1,而不再是一位小数. #include <cstdio> #include <cstring> #define MAXN 105 #def ...