Debounce and Throttle in JavaScript: What You Need to Know!

আপনি কি কখনো জাভাস্ক্রিপ্টে ইভেন্ট হ্যান্ডলার বা API কলের কার্যকারিতা নিয়ে চিন্তা করেছেন? আপনি যখন ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করেন, তখন এমন অনেক পরিস্থিতি আসতে পারে যেখানে আপনাকে ইভেন্টের প্রতি একাধিক রেসপন্সের জন্য কোড লেখতে হয়। তবে, অনেক সময় অপ্রয়োজনীয় কল বা ইভেন্ট ট্রিগার হলে সাইটের পারফরম্যান্স ধীর হয়ে যেতে পারে। এই ধরনের পরিস্থিতি মোকাবেলা করতে ডেবাউন্স এবং থ্রটল দুটি কৌশল অনেক সাহায্য করতে পারে। চলুন, এখন জেনে নেওয়া যাক এগুলোর ব্যাখ্যা এবং কিভাবে এগুলি ব্যবহার করা যায়।

ডেবাউন্স (Debounce) কী?

ডেবাউন্স হল একটি কৌশল যা একাধিক ইভেন্টের রেসপন্স কেবলমাত্র একটি নির্দিষ্ট সময় পর বা একটি নির্দিষ্ট সময়ের মধ্যে সবচেয়ে শেষ ইভেন্টটিকে ট্রিগার করার জন্য ব্যবহৃত হয়। যখন আপনি কোনো ইভেন্ট বারবার ঘটাতে থাকেন (যেমন: টাইপ করা, স্ক্রোল করা), তখন ডেবাউন্স আপনাকে নিশ্চিত করে যে, নির্দিষ্ট সময়ের মধ্যে কেবল একবার ইভেন্টটি কার্যকর হবে।

উদাহরণস্বরূপ, আপনি যদি একটি সার্চ বক্সে টাইপ করতে থাকেন, এবং প্রতিটি টাইপিংয়ের সাথে সাথে API কল করা হয়, তবে অনেকগুলো অপ্রয়োজনীয় কল হবে। ডেবাউন্স ব্যবহার করে আপনি এই সমস্যা সমাধান করতে পারেন, যেখানে শুধুমাত্র আপনার টাইপিং শেষ হলে একটি কল করা হবে।

ডেবাউন্স উদাহরণ:

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  }
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
  console.log('Searching:', this.value);
}, 500));

এখানে, টাইপিং করার পর ৫০০ মিলিসেকেন্ড পরে সার্চ কলটি ট্রিগার হবে। এর ফলে একাধিক অপ্রয়োজনীয় কল প্রতিরোধ করা যাবে।

থ্রটল (Throttle) কী?

থ্রটল হল আরেকটি কৌশল যা ইভেন্টের প্রতি একটি নির্দিষ্ট সময়ে কেবলমাত্র একবার রেসপন্স করতে সাহায্য করে। এই কৌশলে, ইভেন্টটি যতই ঘন ঘন ঘটুক না কেন, সেটি কেবলমাত্র একটি নির্দিষ্ট ইন্টারভ্যাল পরপর কার্যকর হবে। এটি বিশেষভাবে উপকারী যখন আপনি এমন ইভেন্টগুলোর সাথে কাজ করছেন যা অনেক দ্রুত ঘটতে থাকে, যেমন স্ক্রোলিং বা রিসাইজিং।

উদাহরণস্বরূপ, আপনি যখন একটি ওয়েব পেজ স্ক্রোল করছেন, যদি প্রতিটি স্ক্রোল ইভেন্টের জন্য কোন ফাংশন কল করা হয়, তাহলে তা সিস্টেমের পারফরম্যান্সে প্রভাব ফেলতে পারে। থ্রটল ব্যবহার করলে, আপনি কেবলমাত্র একটি নির্দিষ্ট ইন্টারভ্যাল পরপর ফাংশন কল করতে পারবেন।

থ্রটল উদাহরণ:

function throttle(func, delay) {
  let lastTime = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      func.apply(this, arguments);
      lastTime = now;
    }
  }
}

window.addEventListener('scroll', throttle(function() {
  console.log('Scrolling...');
}, 1000));

এখানে, স্ক্রোলিংয়ের জন্য ১ সেকেন্ড পরপর কল করা হবে, যার ফলে একাধিক কলের ফলে সিস্টেমের পারফরম্যান্সে প্রভাব পড়বে না।

ডেবাউন্স এবং থ্রটল মধ্যে পার্থক্য

ডেবাউন্স এবং থ্রটল দুটি ইভেন্ট কন্ট্রোল কৌশল হলেও তাদের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে:

• ডেবাউন্স: এটি কেবলমাত্র শেষ ইভেন্টটি ট্রিগার করে, অর্থাৎ ইভেন্টের উপর নির্ভর করে পরবর্তী সময় পর্যন্ত অপেক্ষা করা হয়।
• থ্রটল: এটি ইভেন্টের জন্য নির্দিষ্ট সময়ের মধ্যে একাধিক কল প্রতিরোধ করে এবং কেবলমাত্র একটি নির্দিষ্ট সময় অন্তর ফাংশন কল করতে দেয়।
• ব্যবহার: ডেবাউন্স সাধারণত সেই ক্ষেত্রে ব্যবহৃত হয় যেখানে ইভেন্টের পর অনেকগুলো দ্রুত কল হতে থাকে (যেমন: টাইপিং), এবং থ্রটল ব্যবহার হয় সেইসব ক্ষেত্রে যেখানে ইভেন্টগুলোর মধ্যে বিরতি থাকার দরকার হয় (যেমন: স্ক্রোলিং)।

কখন ডেবাউন্স ব্যবহার করবেন এবং কখন থ্রটল?

যখন আপনার প্রোগ্রামে ইভেন্টগুলি খুব দ্রুত ঘটছে এবং আপনি চাইছেন যেন তা একটি নির্দিষ্ট সময়ের পরপর একটি কল হোক, তখন থ্রটল ব্যবহার করুন। উদাহরণস্বরূপ, স্ক্রোলিং বা রিসাইজিংয়ের জন্য এটি কার্যকর।

অন্যদিকে, যখন আপনি একটি ইভেন্টের শেষ হওয়ার পরে সিস্টেমকে কেবল একটি কল করতে চান, তখন ডেবাউন্স ব্যবহার করবেন। যেমন, সার্চ ইনপুট যেখানে আপনি একটি টাইপিং ইভেন্ট শেষ হওয়ার পরেই সার্চ কল করতে চান।

শেষ কথা

ডেবাউন্স এবং থ্রটল দুটি শক্তিশালী কৌশল যা আপনার জাভাস্ক্রিপ্ট কোডকে আরো দক্ষ এবং পারফরম্যান্স-ভিত্তিক করতে সাহায্য করবে। এটি আপনাকে অপ্রয়োজনীয় ইভেন্ট কলগুলি প্রতিরোধ করতে সাহায্য করবে এবং সাইটের পারফরম্যান্সের উন্নতি করবে। আশা করি এই আর্টিকেলটি আপনাকে এই কৌশল দুটি বুঝতে এবং তাদের বাস্তব জীবনে প্রয়োগ করতে সহায়তা করবে।