[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 ...
随机推荐
- paramiko学习
1. ssh简介 2. ssh私有key/共有key的区别 3. paramiko的常规使用
- python入门笔记第一天
查询acsii命令 ord(‘A’) 导入模块python执行系统命令显示文件.查找文件方法1import osa = os.popen('目标').read()a 解释output = os.pop ...
- 配置SHH集群
==特别要注意当前用户的问题== 1. 修改路由信息 vi /etc/hosts 10.211.55.15 hmaster1 10.211.55.16 hmaster2 10.211.55.17 hs ...
- 转:实用 .htaccess 用法大全
原文来自于:http://www.techug.com/htaccess-snippets 这里收集的是各种实用的 .htaccess 代码片段,你能想到的用法几乎全在这里. 免责声明: 虽然将这些代 ...
- scroller
sh做的js控件. 另外内部被scroller包裹的div不可以定位成absolute,会撑不出高度. 上面只是使用的注意事项. 很佩服人家能封装出这样的控件. 如果我也能写得出来就能毕业了,也不用担 ...
- 定制ckeditor的菜单
修改配置文件config.js来定制cheditor的菜单,需要以下步骤: 1.找到ckeditor安装目录的config.js文件 2.记下要使用的功能名,以下的"-"代表分隔符 ...
- hibernate异常：Could not determine type for: java.util.Set
根本原因:我实体类中的类型是raw,没法直接实例化的类型.private List<String> rightChoices;private Set<String> multi ...
- 基于android的Socket通信
一.Socket通信简介 Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户 ...
- c++复习基础要点02 虚函数与模板 与static inline是否共存
1. 虚函数能否定义为模板函数 当一个类有虚函数时,它一定有一个虚表,用来纪录每个虚函数的实际地址.这也就是说这个虚表的大小是在编译期就确定了的.有多少个虚函数,虚表就纪录几个. ...
- 2013.08.23.diary
Today, my baby called me.She said, she want to go abroad . And she wants me to go abroad too. I thin ...