debouncing and throttling in javascript simplified by aryan
Tags: javascript, react, webdev, programming
Published: 2024-07-08 02:50:02

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
```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
```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
```html
<!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
```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
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e35ax3ira5pizaace85y.png)

[Validate html❤](https://validator.w3.org/)
[video reference](https://www.youtube.com/watch?v=TppUB5WGz8w)
[my linkedin❤](https://www.linkedin.com/in/aryan-khandelwal-779b5723a/)