[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开发APP接口---返回数据的封装类
参考视频http://www.imooc.com/learn/163 <?php /** * app返回数据类 * 1.接受多维,缺少键名的数组, * 2.可由输入的format参数决定返回数据 ...
- ajax 异步上传视频带进度条并提取缩略图
最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...
- Apache 支持.htaccess
******************************************************************************* Apache 服务器 ********* ...
- easy UI demo 含数据库加载示例
easyUI 部分代码在Googlecode 托管时而被抢此文件包含了所有官方demo,作为备份 下载地址http://pan.baidu.com/s/1pJ9hS5H
- C# 启动和结束一个线程
在程序执行中会遇到启动本软件的exe问,或者启用其它的exe文件,已达到执行某些操作的作用.下面是两种最常见的启动exe文件. 1.调用系统dll使用其提供的方法. 引用的dll, [DllImpor ...
- uboot环境变量区为何不能放在data段
一.疑问 环境变量也是全局变量,为何不能像其他的全局变量放在data段呢?为什么要放在堆中或者使用ENV_IS_EMBEDDED定义的CFG_ENV_SIZE的空间大小,又为什么需要这么大的空间呢? ...
- DXP 技巧和龙芯3A装机
时间过得好快!来公司已经半个月多了!本想着每日一搏,可是一再被耽搁,到今天才写.好了,废话不说了.就把自己这些天做的事写一些.理一理吧.也希望大家监督,由于水平有限,有不正确的地方,还望指正! 刚来做 ...
- windows下端口被占用的解决方法
1:打开CMD输入:netstat -ano | findstr "80" 找到PID: 2:查看应用名称:tasklist | findstr "2544" ...
- Eclipse中Android公共库的正确建立及调用方法
Eclipse中Android公共库的正确建立及调用方法 引言 之前一直头痛于没有办法在多个程序中共享资源,用作公共类库的方法也是使用的导出jar再导入的办法,现在终于初步搞明白了,可算解脱了~,分享 ...
- HTTP-304 NOT Modified
http://www.douban.com/note/161120791/ http://blog.sina.com.cn/s/blog_4c98b9600100jd4z.html http://ww ...