_.debounce() এবং _.throttle() ফাংশনগুলি Lodash লাইব্রেরির দুটি শক্তিশালী ফাংশন যা JavaScript অ্যাপ্লিকেশনের পারফরম্যান্স অপটিমাইজ করার জন্য ব্যবহৃত হয়, বিশেষত যখন আপনি বিভিন্ন ইভেন্টের উপর কর্ম সম্পাদন করছেন, যেমন স্ক্রোলিং, টাইপিং, সাইজ চেঞ্জিং ইত্যাদি। এই ফাংশনগুলো মূলত ফাংশন কলগুলিকে নিয়ন্ত্রণ করতে সাহায্য করে, যাতে সিস্টেমের উপর অতিরিক্ত লোড না আসে এবং কর্মক্ষমতা বজায় থাকে।
১. _.debounce() – ডেবাউন্সিং (Debouncing)
_.debounce() ফাংশনটি একটি ফাংশনের কলের সংখ্যা সীমিত করে, যাতে সেটি একাধিকবার কল হওয়ার পরিবর্তে শুধুমাত্র নির্দিষ্ট সময় পর পর একবারই কল হয়। এটি সাধারণত ব্যবহার করা হয় যখন কোনো ইউজার একটানা কোনো অ্যাকশন (যেমন টাইপিং বা স্ক্রোলিং) করছে এবং আপনি চান যে সেই অ্যাকশনটি শুধুমাত্র একবার এবং নির্দিষ্ট সময় পরে সম্পাদিত হোক।
সাধারণ সিনট্যাক্স:
_.debounce(func, wait, [options])
- func: যে ফাংশনটি ডেবাউন্স করতে হবে।
- wait: সময়ের পরিমাণ (মিলিসেকেন্ড) যে সময় পরে ফাংশনটি কল করা হবে।
- [options]: optional parameter, যা
leadingএবংtrailingফ্ল্যাগগুলি নিয়ন্ত্রণ করতে ব্যবহার করা হয়।
উদাহরণ:
const _ = require('lodash');
let count = 0;
const increment = () => {
count++;
console.log(count);
};
// Debounced function with 1 second delay
const debouncedIncrement = _.debounce(increment, 1000);
// ইভেন্ট ট্রিগার হলে এই ফাংশনটি একাধিকবার কল হবে, তবে শুধুমাত্র 1 সেকেন্ড পর একবারই কল হবে।
debouncedIncrement();
debouncedIncrement();
debouncedIncrement(); // শুধু একবার কল হবে 1 সেকেন্ড পরে।
ব্যাখ্যা: এখানে, debouncedIncrement() ফাংশনটি একাধিকবার কল করা হয়েছে, তবে 1 সেকেন্ড পর একবারই কার্যকর হবে। একাধিক কল গুলি একত্রিত হয়ে, সময়ের শেষে একটি একক কল হবে।
২. _.throttle() – থ্রটলিং (Throttling)
_.throttle() ফাংশনটি একটি ফাংশনকে নির্দিষ্ট সময় পর পর একবারই কল করার জন্য ব্যবহৃত হয়। এটি ইভেন্টের মাধ্যমে ফাংশন কলের সংখ্যা নিয়ন্ত্রণ করতে সাহায্য করে। _.throttle() মূলত ব্যবহার করা হয় যখন আপনি চান যে কোনো ইভেন্ট প্রতি নির্দিষ্ট সময় অন্তর অন্তর ট্রিগার হোক, যেমন স্ক্রলিং বা উইন্ডো রিসাইজিং ইত্যাদি।
সাধারণ সিনট্যাক্স:
_.throttle(func, wait, [options])
- func: যে ফাংশনটি থ্রটল করতে হবে।
- wait: সময়ের পরিমাণ (মিলিসেকেন্ড) যে সময় পরে ফাংশনটি কল করা হবে।
- [options]: optional parameter, যা
leadingএবংtrailingফ্ল্যাগগুলি নিয়ন্ত্রণ করতে ব্যবহার করা হয়।
উদাহরণ:
const _ = require('lodash');
let scrollCount = 0;
const logScroll = () => {
scrollCount++;
console.log('Scrolled:', scrollCount);
};
// Throttled function with 1 second delay
const throttledScroll = _.throttle(logScroll, 1000);
// ইভেন্ট ট্রিগার হলে, প্রতি 1 সেকেন্ডে একবার logScroll কল হবে।
window.addEventListener('scroll', throttledScroll);
ব্যাখ্যা: এখানে, throttledScroll ফাংশনটি প্রতি 1 সেকেন্ডে একবার কল হবে, যখনই স্ক্রলিং হবে। যদি স্ক্রলিং একাধিকবার ঘটে, তাহলে প্রতি সেকেন্ডে একবারই logScroll() কল হবে, ফলে সিস্টেমের উপর অতিরিক্ত লোড পড়বে না।
৩. _.debounce() এবং _.throttle() এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | _.debounce() | _.throttle() |
|---|---|---|
| কাজের ধরণ | একাধিক কলের মধ্যে সর্বশেষ কলটি শুধুমাত্র নির্দিষ্ট সময় পর করা হয়। | নির্দিষ্ট সময় পর পর ফাংশনটি একবার কল হয়। |
| ব্যবহার | টাইপিং, ফিল্টারিং, সার্চ ইত্যাদিতে ব্যবহার করা হয় যেখানে ফলাফল পরবর্তী কলের সাথে সিঙ্ক্রোনাইজ করা হয়। | স্ক্রোলিং, উইন্ডো রিসাইজ, ইভেন্ট লিসনার ইত্যাদিতে ব্যবহৃত হয়। |
| সময় | কলগুলির মধ্যে নির্দিষ্ট সময়ের পরে একটি একক কল হয়। | প্রতি নির্দিষ্ট সময় অন্তর কল হয়। |
| উদাহরণ | সার্চ বার টাইপিং, অটো-কমপ্লিট ফিচার। | স্ক্রল ইভেন্ট, উইন্ডো সাইজ পরিবর্তন। |
৪. Performance Optimization
_.debounce() এবং _.throttle() ব্যবহার করলে আপনি আপনার অ্যাপ্লিকেশন বা ওয়েবসাইটের পারফরম্যান্স অনেকটা উন্নত করতে পারেন। যেসব পরিস্থিতিতে একাধিক ফাংশন কল হচ্ছে, যেমন ইউজারের স্ক্রোলিং, টাইপিং, অথবা সাইজ চেঞ্জ, সেখানে এই ফাংশনগুলো ব্যবহার করলে unnecessary function calls কমিয়ে আনা যায়, ফলে ল্যাগ এবং স্লো রেসপন্স রেট কমে যায়।
- Debouncing: ব্যবহারকারী যখন দ্রুত কিছু টাইপ করে, তখন প্রতিটি টাইপ ইভেন্টের জন্য ফাংশন কল করা উচিত নয়।
_.debounce()ব্যবহার করলে আপনি নিশ্চিত করতে পারেন যে ব্যবহারকারী টাইপিং শেষ করার পরে, সার্চ বা অটো কমপ্লিট কেবল একবার ট্রিগার হবে। - Throttling: স্ক্রোলিং বা সাইজ চেঞ্জিংয়ের মতো ইভেন্টে, একাধিক কলের পরিবর্তে আপনি প্রতি নির্দিষ্ট সময় পর পর একটি কল হ্যান্ডল করতে পারবেন। এটি পারফরম্যান্সের জন্য উপকারী, কারণ এটি অতিরিক্ত কল করা এড়ায়।
উপসংহার
Lodash এর _.debounce() এবং _.throttle() ফাংশনগুলি ইভেন্ট ড্রিভেন অ্যাপ্লিকেশনগুলিতে পারফরম্যান্স অপটিমাইজেশনের জন্য অত্যন্ত কার্যকরী। এগুলি সাহায্যে আপনি অতিরিক্ত ফাংশন কল কমিয়ে, ইউজারের জন্য স্মুথ এবং দ্রুত অভিজ্ঞতা নিশ্চিত করতে পারেন। _.debounce() ব্যবহার করে আপনি টাইপিং বা সার্চের মত ইভেন্টগুলিকে অপ্টিমাইজ করতে পারবেন, এবং _.throttle() ব্যবহার করে আপনি স্ক্রলিং, রিসাইজিং ইত্যাদি ইভেন্টগুলো নিয়ন্ত্রণ করতে পারবেন।
Read more