If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
JS Debouncing
Debouncing एक programming technique है जो तब useful होती है जब कोई function बार-बार call होता है (rapidly) जैसे typing events, scrolling, या window resize के वक्त।
इस technique का main idea है कि एक function को तभी execute करना जब user activity stop कर दे, और एक certain time (e.g., 300ms) तक कोई और activity न हो।
जब event trigger होता है (जैसे typing), एक timer set होता है।
अगर user फिर से action करता है (e.g., दूसरा key press), तो timer reset हो जाता है।
Function तभी execute होता है जब timer expire हो जाये (user ने कुछ time तक कोई action न किया हो) ।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Without Debouncing</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="searchBox" placeholder="Type something..." />
<script>
$('#searchBox').on('input', function () {
console.log('Searching for:', $(this).val());
});
</script>
</body>
</html>Problem : अगर user "Hello" type करेगा, तो हर key press पर console.log execute होगा। मतलब 5 बार call होगा (एक हर character के लिए). ये unnecessarily heavy हो सकता है अगर API call हो रही हो।
●●●
<!DOCTYPE html>
<html lang="en">
<head>
<title>With Debouncing</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="searchBox" placeholder="Type something..." />
<script>
// Debounce function
function debounce(func, delay) {
let timeoutId; // Timer ko store karne ke liye variable
return function (...args) {
clearTimeout(timeoutId); // Pehle wale timer ko clear karo
timeoutId = setTimeout(() => {
func.apply(this, args); // Timer ke baad function execute karo
}, delay);
};
}
// Actual function to be executed
function onSearch() {
console.log('Searching for:', $('#searchBox').val());
}
// Wrap the function with debounce
const debouncedSearch = debounce(onSearch, 300);
// Event listener
$('#searchBox').on('input', debouncedSearch);
</script>
</body>
</html>Explanation
जब user type कर रहा है, debounce function हर key press पर timer reset करता है।
Timer तभी execute होता है जब user ने typing stop कर दी हो और 300ms beet चुके हो।
अगर user "Hello" type करेगा और stop करेगा, तो function सिर्फ एक बार call होगा (typing के ख़त्म hone के बाद).
●●●
आप इसको real-world search bar के लिए use कर सकते हो, जिसमे typing के बाद API call होती है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Debounced API Search</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="searchBox" placeholder="Search something..." />
<script>
function debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
function fetchSearchResults() {
const query = $('#searchBox').val();
console.log('Fetching results for:', query);
// Example API call (replace with real API)
$.get(`https://jsonplaceholder.typicode.com/posts?q=${query}`, function (data) {
console.log('Results:', data);
});
}
const debouncedFetch = debounce(fetchSearchResults, 500);
$('#searchBox').on('input', debouncedFetch);
</script>
</body>
</html>●●●
Performance Optimization : हर key press पर function call hone से बचाता है।
Smooth User Experience : Typing ख़त्म hone के बाद ही action perform होता है।
Server Bandwidth Save : हर event पर API call करने के वजाय , सिर्फ last के input पर call होती है।
Loading ...