[Reactive Programming] Using an event stream of double clicks -- buffer()
-- of Using an stream Event Buffer Programming
2023-09-14 08:59:20 时间
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 = "-"; });
相关文章
- Eclipse和Maven的结合使用--Please make sure the -vm option in eclipse.ini
- 推荐系统学习 -- 利用社交网络数据
- Java12新特性 -- Shenandoah GC
- 设计模式 -- 责任链模式或者叫职责链模式(Chain of Responsibility(CoR))
- 设计模式--适配器模式
- Face Alignment by Coarse-to-Fine Shape Searching--解析
- [Javascript] Broadcaster + Operator + Listener pattern -- 15. Create a Sequence of Broadcasters
- [Javascript] Use an Array of Promises with a For Await Of Loop
- [Reactive Programming] Using an event stream of double clicks -- buffer()
- [Ruby] Blocks -- Ex
- UglifyJS--javascript代码压缩使用指南{转}
- 《安富莱嵌入式周报》第221期:2021.07.12--2021.07.18
- iis配置问题报错 -- Could not load file or assembly 'Oracle.DataAccess' or one of its dependencies
- Spring MVC更多家族成员--国际化视图与LocalResolver---10
- makefile编写--引用
- poj2299--B - Ultra-QuickSort(线段树,离散化)
- poj3126--Prime Path(广搜)
- SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!