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()的更多相关文章

  1. "reactive programming"的概念

    下面的内容大多是翻译来的. Reactive Programming? What is Reactive Programming? 为了了解Reactive——从编程范式至其背后的动机,有必要了解现在 ...

  2. "Principles of Reactive Programming" 之 <Persistent Actor State>学习笔记

    这是<Pinciples of Reactive Programming>week6的最后一课. 为什么需要把actor的状态持久化? 如果actor没有状态,那么在任何实时,这个acto ...

  3. [RxJS] Reactive Programming - What is RxJS?

    First thing need to understand is, Reactive programming is dealing with the event stream. Event stre ...

  4. Reactive Programming

    Reactive的表现 Reactive 规范是 JVM Reactive 扩展规范 Reactive Streams JVM,而 Reactive 实现框架则是最典型的实现: Reactive St ...

  5. .Net中的反应式编程(Reactive Programming)

    系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LI ...

  6. Unity基于响应式编程(Reactive programming)入门

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

  7. ReactiveCocoa与Functional Reactive Programming

    转自 http://blog.leezhong.com/ios/2013/06/19/frp-reactivecocoa.html Functional Reactive Programming(以下 ...

  8. 指路Reactive Programming

    指路Reactive Programming Mar 02, 2016 in Engineering 我在工作中采用Reactive Programming(RP)已经有一年了,对于这个“新鲜”的辞藻 ...

  9. Functional Reactive Programming

    Functional Reactive Programming (FRP) integrates time flow and compositional events into functional ...

随机推荐

  1. IPv6被拒如何破？－b

    APP在美国的IPv6-Only网络环境下测试不通过. 网上各种方法都试了,什么NSURLConnection, Reachability,试完还是拼人品,快要跪了 小伙伴们开始质疑这种测试方法了. ...

  2. Codeforces Round #204 (Div. 2): B

    很简单的一个题: 只需要将他们排一下序,然后判断一下就可以了! 代码: #include<cstdio> #include<algorithm> #define maxn 10 ...

  3. 树莓派（jessie）制作服务并开机启动

    /etc/init.d/xware #!/bin/sh ### BEGIN INIT INFO # Provides: svn_serve # Required-Start: $remote_fs # ...

  4. 2015 年 Ruby 大盘点

    2015 年 Ruby 圈发生了很多有趣的事,让我们跟随 Glenn Goodrich 来回顾一下 15 年 Ruby 的年度标志性事件. 2015 将要结束,这一年对于 Ruby 来说非常重要.如果 ...

  5. codeforces C. No to Palindromes!

    http://codeforces.com/contest/465/problem/C 题意:给你一个字符串,然后按照字典序找出下一个字符串,这个字符串中不能含有长度大于等于2的子串为回文串,如果含有 ...

  6. 转-[Python 学习]2.5版yield之学习心得

    在 shhgs 发布了关于< Py 2.5 what’s new 之 yield>之后,原来我不是特别关注 yield 的用法,因为对于2.3中加入的yield相对来说功能简单,它是作为一 ...

  7. 在linux中使用php将word文档转为pdf

    使用本教程需要在linux中安装openoffice,改页面中有详细的安装与使用教程(http://www.cnblogs.com/sustudy/p/3999628.html). 既然,你看了该教程 ...

  8. 启用VSFTPD日志及其解读

    启用vsftpd日志及其解读(转贴)在vsftpd.conf中有如下内容定义了日志的记录方式:# 表明FTP服务器记录上传下载的情况xferlog_enable=YES# 表明将记录的上传下载情况写在 ...

  9. Android List<Map<String,String>转json(例子)

    package com.armslee.json.test.cases; import java.util.ArrayList; import java.util.HashMap; import ja ...

  10. 深入浅出Node.js (附录B) - 调试Node

    B.1 Debugger B.2 Node Inspector B.2.1 安装Node Inspector B.2.2 错误堆栈