Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में javascript में इस्तेमाल की जानेवाली Throttling technique के बारे में जानेगे की Throttling technique क्या है और इसका इस्तेमाल क्यों और कब किया जाता है!.
What is Throttling in JavaScript in Hindi?
JavaScript में throttling एक ऐसी technique है जिससे किसी function को एक specific time interval पर call किया जाता है!. यानि की, किसी event पर जब कोई function बार-बार call हो रहा हो, तो throttling उस function के executions को control करती है और ensure करती है की वोह सिर्फ एक specific time interval के बाद ही execute हो, चाहे event कितनी भी बार trigger हो रही हो!. यह technique उन situations में काफी useful होती है जहा events जैसे की scroll, resize या mouse movements handle करने होते हैं!.
Javascript में Throttling का इस्तेमाल किस Scenario में कर सकते है?
मान लीजिये की आप website scroll या resize कर रहे है और हर scroll और resize के साथ एक function बार-बार call हो रहा है!. अगर यह function हर scroll और resizing पर call होता रहा तो वह हर second में कई बार execute हो सकता है!. जो हमारी website browsing performance पर बुरा असर दाल सकता है!. तो हम इस समय के solution के तोर पर Throttling का इस्तेमाल कर सकते है!.
Throttling technique का use करके हम इस function को specific time पर call कर सकते हैं for example के लिए हम Throttling में हम delay time set कर सकते है जिसके चलते function उस delay time के बाद ही execute हो, chahe scroll और resizing event कितने ही बार trigger हुवा हो!.
Throttling का basic concepts क्या है?
Javascript में Throttling का basic concept यह है की
1. हम किसी function को बार-बार execute होने से रोक सकते है! और उससे एक fixed specific time में या interval में सिर्फ एक बार ही execute होने देते हैं!.
2. Throttling जैसी technique के इस्तेमाल से application और website का performance improve कर सकते है और unnecessary function calls को avoid कर सकते हैं!.
Javascript Throttling example
हम Throttling को example के जरिये समजने की कोसिस करते है!.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Throttling Example in javascript</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<input type="text" id="searchBox" placeholder="Type your search here...">
<button id="searchButton">Search</button>
<div id="result"></div>
</body>
</html>
Javascript
<script>
function throttle(func, delay) {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), delay);
}
};
}
function performSearch() {
const query = document.getElementById("searchBox").value;
document.getElementById("result").innerText = `Searching for: ${query}`;
console.log(`Search result: ${query}`);
}
const throttledSearch = throttle(performSearch, 2000);
document.getElementById("searchButton").addEventListener("click", throttledSearch);
</script>
Source code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Throttling Example in javascript</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<input type="text" id="searchBox" placeholder="Type your search here...">
<button id="searchButton">Search</button>
<div id="result"></div>
<script>
function throttle(func, delay) {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), delay);
}
};
}
function performSearch() {
const query = document.getElementById("searchBox").value;
document.getElementById("result").innerText = `Searching for: ${query}`;
console.log(`Search result: ${query}`);
}
const throttledSearch = throttle(performSearch, 2000);
document.getElementById("searchButton").addEventListener("click", throttledSearch);
</script>
</body>
</html>
ऊपर के example में देख सकते है जब बी हम search button click करते है वह 2 second के बाद search result को दिखता है!. इस code को हम detail में समजे तो
search button के click पर throttledSearch() function call किया है और उसके बितर throttle() function call किया है और वह दो argument लेता है!.
func: यह function या जिसे हमने throttling technique के साथ control करा है!.
delay: यह function calling का time interval है जो बताता है की func को कितने time के बाद call करना है!.
throttle() function में हमने let inThrottle variable का इस्तेमाल किया वह एक flag है जो हमें यह बताता है की क्या अभी func throttled state में है या नहीं!.
अगर inThrottle true है, तोह इसका मतलब है की func ने अभी हाली में execute किया है और delay time अब तक complete नहीं हुआ है!,
इसलिए func अभी दोबारा call नहीं हो सकता!.
…args से जो भी arguments pass किये गए हैं, वह args में store हो जायेंगे. हम उन्हें आगे func में pass करेंगे!.
if (!inThrottle): यह condition check करती है की क्या inThrottle false है!. अगर यह false है, तोह इसका मतलब है की func को अब call किया जा सकता है!.
func.apply(context, args): यह func को call करता है!. apply का use इसलिए किया गया है ताकि func को सही context (this value) और arguments (args) के साथ execute किया जा सके!.
inThrottle = true: func के execute होने के बाद, inThrottle को true सेट कर दिया जाता है ताकि agle call को रोका जा सके जब तक delay time complete नहीं हो जाता!.
setTimeout(() => (inThrottle = false), delay): यह delay के लिए एक timer start करता है, और जैसे ही delay time complete होता है, यह inThrottle को फिर से false कर देता है ताकि func फिर से अगले trigger पे execute हो सके!.
