[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 ...
随机推荐
- php脚本业务逻辑
设置时区 设置执行不超时 设置根目录常量 引入配置文件(自定义/模板) 错误记录 定义业务类 执行业务类::run() 数据库单例初始化(连接) 日志单例初始化(引入日志类,配置日志路径,日志开关) ...
- 将VIM配置成强大的IDE（三）
上一节,我们知道了,我们了解了怎么配置插件的下下载. 现在,我们就可以去DIY我们的IDE了,主要介绍taglist插件和NERDTree插件,最终的结果是: 1.安装Taglist插件. Tagli ...
- Android Activity 管理
- Model Thinking1
Why Model Reason # 1: Intelligent Citizen of the World Reason # 2: Clearer Thinker Reason # 3: Under ...
- 工欲善其事必先利其器-Notepad++使用小记(Python)
大学开始就一直使用Notepad++ 作为代码编辑器,喜欢它的简洁明了,喜欢它的个性,也喜欢它各种各样骚气的插件. 今天闲来无事,写篇文章记录一下平时使用的种种,包括但不限于个性化使用一些宏,快捷键, ...
- 调用相册怎么设置剪裁－b
//创建一个相册控制器 UIImagePickerController *pc = [[UIImagePickerController alloc] init]; //图片来源// UIImagePi ...
- Javascript AMD模块化规范－备用
AMD是"Asynchronous Module Definition"的缩写,意思是"异步模块定义". 模块定义define(id?, dependencie ...
- [译]36 Days of Web Testing(二)
Day 7: Http 和 Https Why? 当在网络上传输一些私人,敏感信息时,应该采用加密的手段来保证这些信息在传输的过程中不被侦测到.Https协议正是这种实现机制. Https是一种广泛使 ...
- 也说说EM
也说说EM [本文链接:http://www.cnblogs.com/breezedeus/archive/2012/08/12/2634466.html,转载请注明出处] 前几天看Andrew Ng ...
- Microsoft HoloLens 技术解谜（下）
读者提问之“HoloLens 的深度传感器有没有可能是基于 TOF?” 先介绍下背景知识,市面上常见的有三种类型的深度传感器: 结构光,这个技术的代表产品是 Kinect 一代,它的传感器芯片用的是 ...