_.debounce এবং _.throttle কি?
_.debounce এবং _.throttle হল Underscore.js লাইব্রেরির দুটি গুরুত্বপূর্ণ ফাংশন যা ফাংশন কন্ট্রোল এবং অপ্টিমাইজেশনের জন্য ব্যবহৃত হয়। এগুলি সাধারণত তখন ব্যবহার করা হয় যখন আপনি একটি ফাংশনকে বারবার কল করতে চান না, বিশেষত যখন এটি ইউজারের ইন্টারঅ্যাকশনের উপর ভিত্তি করে কার্যকরী হয়, যেমন স্ক্রোলিং, টাইপিং, বা উইন্ডো রিসাইজ করা।
_.debounce: এটি একটি ফাংশনকে নির্দিষ্ট সময় পর্যন্ত বিলম্বিত করে এবং একাধিক কল একত্রিত করতে সহায়তা করে। এটি কোনও নির্দিষ্ট সময়ের মধ্যে একাধিক ফাংশন কল হলে শুধুমাত্র শেষটি চালানো হয়।_.throttle: এটি একটি ফাংশনকে নির্দিষ্ট সময় অন্তর অন্তর একবারই কল করতে দেয়। এতে ফাংশন একটানা চলতে থাকে না, বরং নির্দিষ্ট সময় ব্যবধানে চলে।
এই দুটি ফাংশন মূলত ব্যবহারকারী অভিজ্ঞতা উন্নত করতে সহায়তা করে এবং কার্যকরীভাবে কর্মক্ষমতা উন্নত করে।
_.debounce এর ব্যবহার
_.debounce ফাংশনটি খুবই উপকারী যখন আপনাকে একটি ফাংশন বারবার কল করা থেকে রোধ করতে হয়, বিশেষ করে ইউজারের দ্রুত ইনপুট বা ইন্টারঅ্যাকশনে যেমন স্ক্রোলিং, টাইপিং ইত্যাদিতে। এটি ব্যবহারকারী ইনপুটের মধ্যে নির্দিষ্ট সময়ের বিরতি দিয়ে ফাংশন চালানোর সুযোগ দেয়।
উদাহরণ: _.debounce ব্যবহার করে ইনপুট টাইপিং কন্ট্রোল
ধরা যাক, আপনি একটি সার্চ বক্সে টাইপ করার সময় সার্চ ফলাফল রিফ্রেশ করতে চান, কিন্তু প্রতিটি টাইপ করার সাথে সাথে সার্চ ফাংশন কল না করে, কিছু বিলম্বে একবারই কল করতে চান।
// Function to simulate API call or search
function search(query) {
console.log("Searching for:", query);
}
// Debouncing the search function
var debouncedSearch = _.debounce(search, 500); // 500ms delay
// Event listener for the input field
document.getElementById('search-box').addEventListener('input', function(event) {
debouncedSearch(event.target.value); // Call the debounced search function
});
এখানে, যখন ইউজার টাইপ করতে শুরু করবে, search ফাংশনটি প্রতি 500 মিলিসেকেন্ডে একবারই কল হবে, যদি ইউজার দ্রুত টাইপ না করেন। এতে unnecessary API calls কমে যাবে।
_.throttle এর ব্যবহার
_.throttle একটি ফাংশনকে নির্দিষ্ট সময় ব্যবধানে একবার কল করতে সাহায্য করে। এটি সাধারণত ব্যবহার করা হয় যখন আপনি এমন কাজ করতে চান যেগুলি খুবই দ্রুত পুনরাবৃত্তি হয় (যেমন, স্ক্রোলিং বা উইন্ডো রিসাইজ) কিন্তু আপনি চান যে এটি খুব দ্রুত না চলে।
উদাহরণ: _.throttle ব্যবহার করে স্ক্রোলিং কন্ট্রোল
ধরা যাক, আপনি পেজ স্ক্রোলিং-এর সময় পজিশন ট্র্যাক করতে চান, কিন্তু স্ক্রোল ইভেন্ট খুব দ্রুত ঘটে এবং বারবার ফাংশন কল করে। আমরা _.throttle ব্যবহার করে স্ক্রোল ইভেন্টটি সীমিত করব।
// Function to handle scroll event
function handleScroll() {
console.log("Scroll position:", window.scrollY);
}
// Throttling the scroll function to run only once every 200ms
var throttledScroll = _.throttle(handleScroll, 200);
// Event listener for the scroll event
window.addEventListener('scroll', throttledScroll);
এখানে, স্ক্রোল ইভেন্ট প্রতি 200 মিলিসেকেন্ডে একবারই handleScroll ফাংশন কল হবে। এটি স্ক্রোলিং ইভেন্টের উপর বেশি চাপ ফেলার আগেই কার্যকরী হয়।
_.debounce এবং _.throttle এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | _.debounce | _.throttle |
|---|---|---|
| কাজের ধরন | বিলম্বিত ফাংশন কল। নির্দিষ্ট সময়ের মধ্যে একাধিক কল একত্রিত হয় এবং শেষটি কল হয়। | নির্দিষ্ট সময়ের মধ্যে একাধিক কল প্রতিরোধ করা হয়, কিন্তু ফাংশন নির্দিষ্ট সময় ব্যবধানে একবার কল হবে। |
| ব্যবহার | ইউজার ইনপুট (টিপিং, সার্চ, উইন্ডো রিসাইজ) ক্ষেত্রে, যখন আপনি একাধিক কল না করতে চান। | স্ক্রোলিং, উইন্ডো রিসাইজ বা থিম চেঞ্জের মতো ক্রমাগত ইভেন্টে। |
| ফাংশন কল | শুধুমাত্র শেষ ইনপুট বা ইভেন্ট কল হয়। | নির্দিষ্ট সময়ের মধ্যে একবার কল হয়। |
| রিটার্ন টাইপ | শেষ আর্গুমেন্ট গ্রহণ করা হয় এবং ফাংশন কল করা হয়। | ফাংশন কলের সময় নির্ধারণ করা হয়। |
সারাংশ
_.debounce এবং _.throttle ফাংশনালিটি Underscore.js লাইব্রেরির অত্যন্ত কার্যকরী টুল যা ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে ফাংশন কন্ট্রোল করে। _.debounce ইভেন্টগুলিকে বিলম্বিত করতে সাহায্য করে, যাতে ফাংশনটি শুধু একবারই কল হয়, যখন ইউজার দ্রুত ইনপুট দেয়। অন্যদিকে, _.throttle ফাংশনটি নির্দিষ্ট সময় অন্তর অন্তর একটি ফাংশন চালাতে সাহায্য করে, যা একাধিক দ্রুত পুনরাবৃত্তি কল প্রতিরোধ করতে কার্যকর। এই দুটি ফাংশনই ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।
Read more
