[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 = "-";
});

posted @ 2015-10-02 03:18 Zhentiw 阅读(297) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

公告

昵称： Zhentiw
园龄： 13年2个月
粉丝： 41
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Answer1215

[Reactive Programming] Using an event stream of double clicks -- buffer()

公告

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜