These jargon is nothing but ways to improve javascript❤ performance.
Debounce
Debounce is improved version of throttle. beware that it will only run when cursor stops running, might miss some important inputs. If you move the cursor within second then it will reset the cursor.
snippet.js
let interval;
function doSomething(){
clearTimeout(interval);
interval = setTimeout(function(){
//your code
},1000)
}
Throttle
Throttle is useful when you want to ensure that a function is called at a limited rate or frequency, without missing any important inputs or events.❤
snippet.js
// It will run
// after 1sec irrespective of cursor movement
let isScroll = true;
function doSomething(){
if(isScroll){
//your code
isScroll = false;
}
setTimeout(function(){
isScroll = true;
},1000)
}
| normal | throttle | debounce |
|---|---|---|
| 1000 | 10 | 1 |
Do by yourself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<!-- Add your CSS or external stylesheets here -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Your content goes here (always give parent element an unique id) -->
<main id='main'>
<!-- always try to give semantic elements I have avoided due to less style writes -->
<section id='normal'>
<span style="font-weigth:600;">Normal </span><span id='normal-counter'></span>
</section>
<section id='throttle'>
<span style="font-weigth:600;">Throttle </span><span id='throttle-counter'><span>
</section>
<section id='debounce'>
<span style="font-weigth:600;">Debounce </span><span id='debounce-counter'>12</span>
</section>
</main>
<!-- Add your JavaScript or external scripts here -->
<script src="script.js" defer></script>
</body>
</html>
script.js
const tcounter = document.getElementById("throttle-counter");
const normal = document.getElementById("normal-counter");
const dcounter = document.getElementById("debounce-counter");
tcounter.innerText = '0'
dcounter.innerText = '0'
normal.innerText = '0'
window.addEventListener('mousemove',update)
// normal counter
let ncounter = 0;
// throttle counter
let tcount = 0;
// debounce counter
let dcount = 0;
// note: functions are hoisted
let isScroll = true;
function update(){
// normal function
normalUpdate();
//throttle function
throttleUpdate();
// debounce function
debounceUpdate();
}
function normalUpdate(){
console.log('normal')
normal.innerText = ncounter++;
}
function throttleUpdate(){
console.log('throttle')
if(isScroll){
//your code
tcounter.innerText = tcount++
isScroll = false;
}
setTimeout(function(){
isScroll = true;
},1000)
}
let interval;
function debounceUpdate(){
console.log('debounce');
clearTimeout(interval);
interval = setTimeout(function(){
//your code
dcounter.innerText = dcount++;
},1000)
}
// you can create a seperate module and import them to make codebase cleaner❤
output
Top comments (0)