[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 ...
随机推荐
- Gvim7.4简单配置
今天下午小折腾了一会Gvim编辑器(7.4版,目前最新).看起来高端又没有代码提示,还能锻炼锻炼记忆. 修改了下默认启动配置<修改后如下图>: 打开编辑器: 编辑->启动设定-> ...
- 【python】原始字符创
原始字符串语法在字符串前加"r" 如 tem=r"h\c\d\n"print(tem) 结果:h\c\d\n 注意:字符串结尾不能是\,否则报错,应对措施将\单 ...
- Use_Case
What is Use-Case 2.0?Use Case: A use case is all the ways of using a system to achieve a particular ...
- German Collegiate Programming Contest 2013:B
一个离散化的简单题: 我用的是STL来做的离散化: 好久没写离散化了,纪念一下! 代码: #include<cstdio> #include<cstring> #include ...
- nodejs 机制
http://news.cnblogs.com/n/190903/ http://www.ruanyifeng.com/blog/2013/10/event_loop.html https://www ...
- Android如何正确的保存文件
在Android 官方开发文档中有一篇文档来介绍如何保存应用的数据,但笔者用过很多程序(从知名的到不知名的)处理的都不是很完美,或者 没有按照Android 开发团队建议的方式去保存他们应用的数据.当 ...
- 查看linux内存、cpu
1.查看cpu数 多核cpu,包括物理多核和逻辑多核,一台机器可能有多个cpu,每个cpu可能有多核的,多个可能包括物理多核和逻辑多核. /proc/cpuinfo 文件里记录了这些信息,以下是一个核 ...
- Learning WCF Chapter 3 Bindings One-Way and Duplex Communication
One-Way and Duplex Communication A message exchange pattern describes the way messages are sent betw ...
- 关于 all-delete-orphan
当关联双方存在父子关系,就可以在 set 处设定 cascade 为 all-delete-orphan 所谓父子关系,即指由父方控制子方的持久化圣明周期,子方对象必须和一个父方对象关联.如果删除父方 ...
- uC/OS-II学习历程（持续更新）
开始接触嵌入式操作系统的知识了,作为入门,选择了一个小巧的系统——uC/OS-II.当然,难度也并不小,至少对我来说是这样.刚刚开始看,使用的参考书是任哲的<嵌入式实时操作系统uC/OS-II原 ...