Debouncing

Debounce: Run only after the user stops triggering the event. “Waiting until you finish talking.”

HTML

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" onkeyup="debounceGetData30(`chandan`)"/>
</body>

<script src="./debounce.js"></script>
</html>

JavaScript

js

let counter = 0;
const getData = function(name){
    console.log("Fetched Data :",name,",", counter++)
}

const debounce = function(fn,d){
    let timeout;
    return function(...args){
        const context = this

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            fn.apply(context,args)
        },d);
    }
}

const debounceGetData30 = debounce(getData,300)