Skip to content

Instantly share code, notes, and snippets.

@iankit3

iankit3/index.html

Created March 2, 2020 14:56
Show Gist options
  • Save iankit3/cbfe081243f67be02f277f94bc7185c1 to your computer and use it in GitHub Desktop.
Save iankit3/cbfe081243f67be02f277f94bc7185c1 to your computer and use it in GitHub Desktop.
Download ZIP
Medium Clap Like feature // source https://jsbin.com/zujavim
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Medium Clap Like feature</title>
<style id="jsbin-css">
button.clap{
width: 30px;
height: 30px;
background: no-repeat center/80% url('https://image.flaticon.com/icons/png/512/109/109638.png') #fff;
background-size: 70%;
box-shadow: 0px 0px 3px 2px #dcdcdc;
border-radius: 50%;
transition: border-width 0.5s;
box-sizing: border-box;
}
button.clap:hover{
box-shadow: 0px 0px 6px 4px #dcdcdc;
}
</style>
</head>
<body>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<button id="clap" class="clap">
</button>
<script id="jsbin-javascript">
"use strict";
var clapBtn = document.getElementById("clap");
var clapOb = Rx.Observable.fromEvent(clapBtn, "click").map(function (ev, x) {
return ++x;
}).throttle(function (ev) {
return Rx.Observable.interval(1000);
});
//log can be a api call
var log = function log(x) {
console.log(x);
};
clapOb.subscribe(function (ev) {
return log(ev);
});
</script>
<script id="jsbin-source-css" type="text/css">button.clap{
width: 30px;
height: 30px;
background: no-repeat center/80% url('https://image.flaticon.com/icons/png/512/109/109638.png') #fff;
background-size: 70%;
box-shadow: 0px 0px 3px 2px #dcdcdc;
border-radius: 50%;
transition: border-width 0.5s;
box-sizing: border-box;
}
button.clap:hover{
box-shadow: 0px 0px 6px 4px #dcdcdc;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var clapBtn = document.getElementById("clap");
var clapOb = Rx.Observable.fromEvent(clapBtn , "click")
.map((ev,x) => {
return ++x;
})
.throttle(ev => Rx.Observable.interval(1000))
//log can be a api call
const log = (x) => {
console.log(x);
}
clapOb.subscribe(ev => log(ev));</script></body>
</html>
Raw
jsbin.zujavim.css
button.clap{
width: 30px;
height: 30px;
background: no-repeat center/80% url('https://image.flaticon.com/icons/png/512/109/109638.png') #fff;
background-size: 70%;
box-shadow: 0px 0px 3px 2px #dcdcdc;
border-radius: 50%;
transition: border-width 0.5s;
box-sizing: border-box;
}
button.clap:hover{
box-shadow: 0px 0px 6px 4px #dcdcdc;
}
Raw
jsbin.zujavim.js
"use strict";
var clapBtn = document.getElementById("clap");
var clapOb = Rx.Observable.fromEvent(clapBtn, "click").map(function (ev, x) {
return ++x;
}).throttle(function (ev) {
return Rx.Observable.interval(1000);
});
//log can be a api call
var log = function log(x) {
console.log(x);
};
clapOb.subscribe(function (ev) {
return log(ev);
});
@iankit3
Copy link
Author

iankit3 commented Mar 2, 2020

Example use of Throttle

https://jsbin.com/zujavim/10/edit?js,console,output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment