[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 ...
随机推荐
- 关于Keil的安装与注册
由于前一段时间一直在做关于stm32f407的相关内容,于是安装的Keil是MDK5,最近一阵子想再看看51单片机以前没有做过的内容,就要再安装一个Keil C51,结果就不可避免的遇到了两个软件必须 ...
- JSP面试题及答案
更新时间:2015-04-07 来源:网络 投诉删除 [看准网(Kanzhun.com)]JSP面试题频道小编搜集的范文“JSP面试题及答案”,供大家阅读参考,查看更多 ...
- 2016年 IT 趋势大预测！
新年伊始,有不少人在总结过去,也有一些人在展望未来.下面让我们跟随 OpsClarity 的 Dhruv Jain,看看他对 2016 IT 趋势有什么大胆的预测. 又到了众人纷纷对下一年进行预测的时 ...
- Internship
zoj2532:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1532 题意:有n个发射点,m个中继站,然后发射点会发射一些信息 ...
- UVA 11624 Fire!(二次BFS)
先对火BFS一次,求出每个点的最小着火时间. 再对人BFS一次,求出走到边界的最少时间. #include <iostream> #include <queue> #inclu ...
- Xmanager连接CentOS的远程桌面
本文主要介绍通过Xmanager连接CentOS远程桌面时,在CentOS系统上需要做的一些配置. 1. Xmanager简介 Xmanager是一个运行于 Windows平台上的高性能的X Serv ...
- @repository注解
Spring的注解形式:@Repository.@Service.@Controller,它们分别对应存储层Bean,业务层Bean,和展示层Bean. @Repository.@Service.@C ...
- HDU-1035 Robot Motion
http://acm.hdu.edu.cn/showproblem.php?pid=1035 Robot Motion Time Limit: 2000/1000 MS (Java/Others) ...
- java jdbc使用配置文件连接数据库：
java jdbc使用配置文件连接数据库: 创建后缀名为:.properties的文件,文件内容包括,数据库驱动.连接的数据库地址.用户名.密码…… 以Mysql为例创建config.properti ...
- Linux学习笔记19——信号2
上一节中讲到了sigprocmask函数,它的作用是检查或修改它的进程信号掩码,这一节我们主要学习捕捉与忽略信号的函数sigaction和等待信号函数. 一 sigaction函数的作用 定义在接收 ...