eggheadio-projects/introduction-to-reactive-programming: null

.DS_Store

# # Introduction to Reactive Programming
_By André Staltz_

![](https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/020/full/EGH_IntrotoReactive.png?1496436376)

"Reactive"
You've probably been hearing this word recently. Reactive Programming has you curious, and you want to dig in and start learning what it is all about.
What's the most difficult aspect of Reactive Programming? Thinking Reactive!
In this series, we will discover what it means to think Reactive through RxJS. We will exercise our minds, and let go of our old imperative and stateful habits of programing.
If you are brand new to reactive programming, watch this series first.

body {
    font-family: sans-serif;
    padding: 10px;
}
.button {
  background: #EcEcEc;
  padding: 5px;
  text-decoration: none;
  color: black;
  border: 1px solid darkgray;
}
h4 {
    font-weight: bold;
    display: inline-block;
    margin-left: 20px;
}
.header {
    /*background: #ECECEC;
    */padding: 5px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="app.css">
  <meta charset="utf-8">
</head>
<body>
<div class="header">
         <a href="#" class="button">BUTTON</a><h4>-</h4>
    </div>
    <script src="https://unpkg.com/rxjs@5.4.3/bundles/Rx.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

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

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

var doubleClickStream = clickStream
  .bufferWhen(() => clickStream.debounceTime(250))
  .map(arr => arr.length)
  .filter(len => len === 2);

doubleClickStream.subscribe(event => {
  label.textContent = 'double click';
});

doubleClickStream
  .delay(1000)
  .subscribe(suggestion => {
    label.textContent = '-';
  });