plastikaweb
1/4/2017 - 3:47 PM

JS Bin RxJS - detect double click with debounce // source https://jsbin.com/refehe

JS Bin

RxJS - detect double click with debounce

// source https://jsbin.com/refehe

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="RxJS - detect double click with debounce">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.compat.js"></script>
</head>
<body>
  
  <button>click</button>
  <h4>Try double click</h4>
<script id="jsbin-javascript">
console.clear();

var button = document.querySelector('button'),
    label = document.querySelector('h4');

var clickStream$ = Rx.Observable.fromEvent(button, 'click');

var doubleClickStream$ = clickStream$
      .buffer(() => clickStream$.debounce(250))
      .map(arr => arr.length)
      .filter(len => len === 2);


doubleClickStream$
  .subscribe(e => label.textContent = 'This was a double click!');

// reset label
doubleClickStream$
  .delay(1000)
  .subscribe(() => label.textContent = 'Try double click');
</script>



<script id="jsbin-source-javascript" type="text/javascript">console.clear();

var button = document.querySelector('button'),
    label = document.querySelector('h4');

var clickStream$ = Rx.Observable.fromEvent(button, 'click');

var doubleClickStream$ = clickStream$
      .buffer(() => clickStream$.debounce(250))
      .map(arr => arr.length)
      .filter(len => len === 2);


doubleClickStream$
  .subscribe(e => label.textContent = 'This was a double click!');

// reset label
doubleClickStream$
  .delay(1000)
  .subscribe(() => label.textContent = 'Try double click');</script></body>
</html>
jsbin.refehe.js
content_copyfile_download
console.clear();

var button = document.querySelector('button'),
    label = document.querySelector('h4');

var clickStream$ = Rx.Observable.fromEvent(button, 'click');

var doubleClickStream$ = clickStream$
      .buffer(() => clickStream$.debounce(250))
      .map(arr => arr.length)
      .filter(len => len === 2);


doubleClickStream$
  .subscribe(e => label.textContent = 'This was a double click!');

// reset label
doubleClickStream$
  .delay(1000)
  .subscribe(() => label.textContent = 'Try double click');