Skip to content

Instantly share code, notes, and snippets.

@charmstead

charmstead/index.html

Created March 23, 2020 22:36
Show Gist options
  • Save charmstead/e9eddca9069c8c1b8d05150d3491d4da to your computer and use it in GitHub Desktop.
Save charmstead/e9eddca9069c8c1b8d05150d3491d4da to your computer and use it in GitHub Desktop.
Download ZIP
My New Pen! // source https://jsbin.com/siyirec
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div class="filter-bar">
<button class="filter-button cat-a">
Category A
</button>
</div>
<div id="result"></div>
<!-- Scripts -->
<script src="scripts/index.js"></script>
<script id="jsbin-javascript">
const button = document.querySelector('.cat-a');
const result = document.querySelector('#result')
button.addEventListener('click', debounce((event) => {
result.innerHTML += `<div>currentTarget with debounce ${event.currentTarget}</div>`;
}), 500)
button.addEventListener('click', (event) => {
result.innerHTML += `<div>currentTarget w/o debounce ${event.currentTarget.nodeName}</div>`;
})
function debounce(callback, wait) {
let timeout;
return (...args) => {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => callback.apply(context, args), wait);
};
}
</script>
<script id="jsbin-source-javascript" type="text/javascript"> const button = document.querySelector('.cat-a');
const result = document.querySelector('#result')
button.addEventListener('click', debounce((event) => {
result.innerHTML += `<div>currentTarget with debounce ${event.currentTarget}</div>`;
}), 500)
button.addEventListener('click', (event) => {
result.innerHTML += `<div>currentTarget w/o debounce ${event.currentTarget.nodeName}</div>`;
})
function debounce(callback, wait) {
let timeout;
return (...args) => {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => callback.apply(context, args), wait);
};
}</script></body>
</html>
Raw
jsbin.siyirec.js
const button = document.querySelector('.cat-a');
const result = document.querySelector('#result')
button.addEventListener('click', debounce((event) => {
result.innerHTML += `<div>currentTarget with debounce ${event.currentTarget}</div>`;
}), 500)
button.addEventListener('click', (event) => {
result.innerHTML += `<div>currentTarget w/o debounce ${event.currentTarget.nodeName}</div>`;
})
function debounce(callback, wait) {
let timeout;
return (...args) => {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => callback.apply(context, args), wait);
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment