[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 ...
随机推荐
- 打造轻量级自动化测试框架WebZ
一.什么是WebZ WebZ是我用Python写的“关键字驱动”的自动化测试框架,基于WebDriver. 设计该框架的初衷是:用自动化测试让测试人员从一些简单却重复的测试中解放出来.之所以用“关键字 ...
- TCP带外数据读写
#include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include &l ...
- 趣味C程序100.9 绘制杨辉三角
说明:1.本问题来源于<C语言经典.趣味.实用程序设计编程百例精解>,所有程序为本人自己编写.与原程序不同之处作有标记. 2.本系列所有程序均使用codeblocks编译,操作系统为Win ...
- [小知识]不显示没有内容的UITableViewCell
开发过程中常常使用到UITableView,当tableView的内容不足一屏时,若设置了talbeView的高度为屏幕高度,就会出现没有内容的cell显示出来,效果非常不好看,要想让没有内容的cel ...
- Hdu5510 Bazinga
Description Ladies and gentlemen, please sit up straight. Don't tilt your head. I'm serious. For \(n ...
- Eclipse插件卸载
以前搞过安卓,重装系统后,安卓损坏了,每次还会提示那个窗口很烦人. 使用Eclipse自带的卸载插件功能即可,Help->About Eclipse->Inst ...
- 【andorid】Attribute is missing the Android namespac
初学安卓,错误颇多 出现这个问题,是因为xml节点属性单词拼写错了,比如android我写成了adnorid,当然就错误了.
- websocket nodejs实例
http://blog.sina.com.cn/s/blog_49cc837a0101aljs.html http://blog.sina.com.cn/s/blog_49cc837a0101a2q3 ...
- 【HDU1538】A Puzzle for Pirates（经典的海盗问题）
[题目] Description A bunch of pirates have gotten their hands on a hoard of gold pieces and wish to di ...
- mysql 海量数据的存储和访问解决方案
第1章 引言 随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互 联网应用,每天几十亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的 ...