[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基础知识【函数】（1）数组array
一.排序 1.sort -- 从最低到最高排序,删除原有的键名,赋予新的键名[字母比数字高] 2.rsort -- 逆向排序(最高到最低),删除原有的键名,赋予新的键名[字母比数字高] 3.asort ...
- UML for Design Pattern
************************************************************************************* ************** ...
- silverlight中DataGrid数据高亮显示
效果如图所示, <UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.W ...
- 学习Swift--枚举的初步认识 --个人备忘 大神勿喷
枚举定义了一个通用类型的一组相关值,使你可以在你的代码中以一种安全的方式来使用这些值. // 定义枚举的语法 enum Chips { // 定义了薯片的枚举,包含了3种口味的成员 case Toma ...
- bzoj 1040: [ZJOI2008]骑士 環套樹DP
1040: [ZJOI2008]骑士 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1755 Solved: 690[Submit][Status] ...
- Codeforces 731D Funny Game
Description Once upon a time Petya and Gena gathered after another programming competition and decid ...
- matlab中元胞数组（cell）转换为矩阵
matlab中元胞数组(cell)转换为矩阵. cell转换为矩阵函数为:cell2mat(c),其中c为待转换的元胞数组: 转化之后的矩阵可能不满足我们对矩阵维数的要求,那么也许还需要下面两个函数: ...
- Git 忽略已经提交的文件
如果想在本地忽略某个文件的话执行这个命令: git update-index --assume-unchanged <file> 如果想重新同步这个文件的话执行这个命令. git upda ...
- Ecshop开发
http://www.cnblogs.com/xcxc/category/579565.html
- 【POJ3710】Christmas Game （博弈-树上的删边问题）
[题目] Description Harry and Sally were playing games at Christmas Eve. They drew some Christmas trees ...