博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Reactive Programming] Using an event stream of double clicks -- buffer()
阅读量:4950 次
发布时间:2019-06-11

本文共 826 字,大约阅读时间需要 2 分钟。

See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect double clicks with a few operators in RxJS.

 

  
JS Bin
BUTTON

-

 

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 clickvar res = doubleClicks.subscribe( () => {    h4.textContent = "double click"});doubleClicks.throttle(1000).subscribe(() => {    h4.textContent = "-";});

 

转载于:https://www.cnblogs.com/Answer1215/p/4851858.html

你可能感兴趣的文章
javascript运算符的优先级
查看>>
React + Redux 入门(一):抛开 React 学 Redux
查看>>
13位时间戳和时间格式化转换,工具类
查看>>
vue router-link子级返回父级页面
查看>>
C# 通知机制 IObserver<T> 和 IObservable<T>
查看>>
Code of Conduct by jsFoundation
查看>>
div 只显示两行超出部分隐藏
查看>>
C#小练习ⅲ
查看>>
debounce、throttle、requestAnimationFrame
查看>>
linux下的C语言快速学习—进程和文件
查看>>
电源防反接保护电路
查看>>
stm32 堆和栈(stm32 Heap & Stack)
查看>>
SpringMVC从入门到精通之第三章
查看>>
JS基础-dom操作
查看>>
【转】Android详细的对话框AlertDialog.Builder使用方法
查看>>
Unite Beijing 2015大型活动
查看>>
loading加载的代码
查看>>
PHP框架CI CodeIgniter 的log_message开启日志记录方法
查看>>
arraylist
查看>>
关于poi导出excel三种方式HSSFWorkbook,SXSSFWorkbook,csv的总结
查看>>