Debouncing in Javascript using a custom function or Lodash library.
Samuel Egbajie
Posted on December 30, 2021
What A Debounce function is
Wait, you are a Javascript developer trying to implement a function to only fire after an interval from when a certain action or event is triggered and you have tried and still not gotten it the right way.
Worry no more as I would put together two ways of doing this the right way without you getting to crack your head so hard and that is what a debounce function solves.
1.) Debouncing using a custom JS function
const debounceTime = (fn, T)=>
{
let timer;
return function() {
if(timer) clearTimeout(timer)
timer=setTimeout(fn, T)
}
}
This function takes in two parameters, a function, fn()
to be debounced and the time interval, T
to wait for the action to run.
Example, we want a callback function that would be called after 1000 Milliseconds or 1 seconds, we would just call the debounceTime function with parameters of the callback function and 1000 Milliseconds.
The function would log "I debounced after 1 seconds" just after 1 second in the console.
debounceTime(()=>{
console.log("I debounced after 1 seconds")
}, 1000)
2.) Debouncing using a Lodash
For you to be able use the lodash package on your Node.js Environment,
you have to first install the lodash package using $ npm i --save lodash
for npm or $ yarn add lodash
for yarn through your command line interface,
after that, you import it into your the file you want to apply it.
import {debounce} from "lodash"
debounce(()=>{
console.log("I debounced after 1 seconds")
}, 1000)
The above use case would work exactly as the example using the custom JS function
I hope it helped π π π
Thanks for reading and Happy coding!!!
Posted on December 30, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.