JavaScript Debounce vs Throttle

javascript debounce vs throttle জাভাস্ক্রিপ্টে ওয়েব পারফরম্যান্স অপটিমাইজ করার ক্ষেত্রে একটি অত্যন্ত গুরুত্বপূর্ণ টপিক। এই ব্লগে আমরা বাস্তব জীবনের গল্প, মজার উদাহরণ, এবং সহজবোধ্য ব্যাখ্যার মাধ্যমে শিখবো কীভাবে Debounce ইউজারের টাইপিং বা ইনপুট থেমে গেলে রিকোয়েস্ট পাঠায়, আর Throttle কীভাবে নির্দিষ্ট সময় ব্যবধানে ফাংশন রান করে, তা ইভেন্ট যতই আসুক না কেন। টাইপভিত্তিক সার্চ, স্ক্রল অ্যানিমেশন, API কল রেট লিমিট সবকিছুতেই এই দুই টেকনিকের বাস্তব ব্যবহার শেখানো হয়েছে। নতুন ডেভেলপার থেকে শুরু করে অভিজ্ঞরা পর্যন্ত সবাই এই গাইড থেকে শিখতে পারবেন কখন, কোথায়, এবং কেন Debounce বা Throttle ব্যবহার করবেন।

ধরো তুমি একটা নতুন ওয়েবসাইট বানালে। সেখানে একটা সার্চ বক্স আছে। ইউজার যখন লিখে, তখন তখনই সার্ভার থেকে সাজেশন দেখানোর কথা।
একজন ইউজার এল, নাম “রানা ভাই”। উনি লেখেন:

জ
জা
জাভা
জাভাস
জাভাস্ক্রিপ্ট

প্রতিটি অক্ষর লেখার সময় সার্ভারে একটা রিকোয়েস্ট যাচ্ছে। এক সেকেন্ডের মধ্যে ৫টা রিকোয়েস্ট! এভাবে সার্ভার ও ব্রাউজার, দুইটাই চাপে পড়ে যাবে। UI ল্যাগ করতে শুরু করবে।

এখন তোমার কী করা উচিত?

Debounce দিয়ে নিশ্চিত করা, যেন ইউজার টাইপ করা থামালে তারপর ৫০০ms পরে শুধু ১টিই রিকোয়েস্ট যায়।

অন্যদিকে ধরো, তুমি একটা স্ক্রল-ভিত্তিক অ্যানিমেশন বানালে, যেটা ইউজার স্ক্রল করলেই কাজ করে। যদি একেকটা স্ক্রলে একেকটা বড় ফাংশন কল হয়, ২-৩ms পরপর, তাহলে ফ্রেম ড্রপ, ল্যাগ সব হবে।

এখানে Throttle দিয়ে নিশ্চিত করতে হবে, প্রতি ১ সেকেন্ডে একবার ফাংশন চলবে।

এই হলো আজকের গল্পের আসল হিরো: javascript debounce vs throttle

Debounce কী?

Debounce এমন একটা পদ্ধতি, যেখানে বারবার ট্রিগার হওয়া একটা ফাংশনকে কিছু সময়ের জন্য দেরি করিয়ে, শুধুমাত্র ইউজার যেই মুহূর্তে শেষবার ট্রিগার করেছে সেটার কিছুক্ষণ পর একবারেই ফাংশন এক্সিকিউট করা হয়।

বাস্তব উদাহরণ: টাইপ করার পর সার্চ রেজাল্ট

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

এবং ইউজ করো এভাবে:

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce((e) => {
  console.log("সার্চ হচ্ছে:", e.target.value);
}, 500));

এখানে যদি ইউজার “javascript” টাইপ করে, তাহলে প্রতিটি লেটারে কল হবে না। বরং ইউজার ৫০০ms টাইপ বন্ধ করলে তারপর একবার কল হবে।

Throttle কী?

Throttle এমন একটা পদ্ধতি, যেখানে একটি ফাংশনকে নির্দিষ্ট সময় ব্যবধানে একবার করে এক্সিকিউট করতে দেওয়া হয়। যতবারই ইউজার চেষ্টা করুক না কেন, একবার রান হলে পরবর্তী এক্সিকিউশন অপেক্ষা করবে নির্ধারিত সময়।

বাস্তব উদাহরণ: স্ক্রল করে গেলে প্রতি ১ সেকেন্ডে একবার কাজ করা

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

ইউজ করো এভাবে:

window.addEventListener('scroll', throttle(() => {
  console.log("স্ক্রলিং পজিশন:", window.scrollY);
}, 1000));

Debounce vs Throttle: বাস্তব জীবনের গল্পে গল্পে বুঝে নাও

জাভাস্ক্রিপ্টের জগতে Debounce আর Throttle যেন দুইজন বডিগার্ড দুজনেই ইউজার ইন্টারঅ্যাকশনের ঝড় সামলানোর জন্য দাঁড়িয়ে থাকে!
তবে ওদের কাজের ধরন একেবারেই আলাদা।

চলুন, গল্পে গল্পে বুঝে নিই ওদের কাজ কী, আর কোথায় কাকে ডাকবো।

Debounce: বিরক্তিকর রনির গল্প

তোমার বন্ধু রনি একটু দুষ্টু স্বভাবের। সারাক্ষণ তোমাকে একেবারে বিরক্ত করে ফেলে।

আজকে ক্লাসের পর হঠাৎ সে তোমাকে ফোন করতে শুরু করল:

“দোস্ত!”
“দোস্ত!”
“দোস্ত!”
“দোস্ত!”
… এভাবে টানা ১০ বার!

তুমি একটু বিরক্ত হয়ে গেলে। ভাবলে “আমি তো চাই, ও যদি একটুখানি চুপ করে থাকে, ধরো ৩ সেকেন্ড, তাহলে উত্তর দেবো ‘কি রে বল’।”

তাই তুমি ঠিক করলে,

“রনি যদি ৩ সেকেন্ড চুপ করে থাকে, তাহলেই আমি কথা বলবো। নয়তো না!”

আর এটিই হলো Debounce।
তুমি যতক্ষণ পর্যন্ত না ইনপুট থেমে যাচ্ছে, কিছু করছো না। ইনপুট থেমে গেলেই তোমার কাজ শুরু।

কোডের দৃষ্টিতে:
Debounce মানে হচ্ছে, ইউজার যেকোনো ইভেন্ট (যেমন টাইপ করা, resize, scroll) চালিয়ে গেলে কিছুই করো না।
কিন্তু সে যদি ইভেন্ট বন্ধ করে দেয় নির্দিষ্ট সময়ের জন্য, তাহলেই একবার কাজ করো।

Throttle: অফিস বসের গল্প

এবার ধরো তুমি একটা কোম্পানিতে ইন্টার্ন হিসেবে কাজ করছো। তোমার বস একটু “হাইপার” টাইপের।
প্রতি ২ মিনিট পরপর জিজ্ঞেস করে:

“কাজ কতদূর হলো?”
“রিপোর্ট বানালে?”
“ক্লায়েন্ট মেইল দিলে?”
“স্লাইড রেডি?”
…এভাবে দিনজুড়ে মাথা খেয়ে ফেলছে।

তুমি বুঝে গেলে, এভাবে হলে তো একঘণ্টাতেই পাগল হয়ে যাবে!

তাই তুমি প্ল্যান করলে:

“যা-ই হোক না কেন, আমি প্রতি ১ ঘণ্টা পরপরই বসকে আপডেট দিবো।
তার মাঝে সে যতবারই জিজ্ঞেস করুক, আমি কোনো উত্তর দিব না!”

এভাবেই তুমি নিজের কাজ চালিয়ে যেতে পারলে শান্তিতে।

এটাই হলো Throttle।
তুমি নির্দিষ্ট একটা সময় সেট করো (যেমন ১ ঘণ্টা), আর এই সময়ের মধ্যে যতবারই কল আসুক না কেন, তুমি একবারই কাজ করো।

কোডের দৃষ্টিতে:
Throttle ব্যবহার করা হয় যেখানে ইউজার ইনপুট অনেক দ্রুত আসে, যেমন Scroll, Resize, Mouse Move ইত্যাদি, কিন্তু আমরা চাচ্ছি নির্দিষ্ট সময় পরপর একবারই কাজ করুক।

JavaScript debounce vs throttle কোথায় কোনটা ব্যবহার করবেন?

কেস	Debounce	Throttle
টাইপ করার পর সার্চ	✅	❌
ইনপুট ভ্যালিডেশন	✅	❌
Scroll / Resize ইভেন্ট	❌	✅
API Rate Limit	✅	✅ (উভয়ই প্রয়োগযোগ্য নির্ভর করে case এর উপর)
মাউস ড্র্যাগ ইভেন্ট	❌	✅

“javascript debounce vs throttle” শেখা মানে শুধু একটা নতুন জিনিস শেখা না এটা শেখা মানে আপনার ইউজারদের জন্য স্মার্ট, পারফরম্যান্স অপটিমাইজড, ও প্রফেশনাল ইউজার এক্সপেরিয়েন্স তৈরি করা।

• Debounce দরকার যেখানে ইউজার টাইপ থামলে কাজ হবে।
• Throttle দরকার যেখানে সময় ধরে কন্ট্রোল করতে হয় কাজের Frequency।

এগুলো শুধু ক্লিন কোড বা ইন্টারভিউর জন্য না এগুলো প্রাক্টিকাল প্রজেক্টে প্রতিদিন ব্যবহার হয়। তাই দেরি না করে, আজ থেকেই এই দুইটি টেকনিক প্রকল্পে প্রয়োগ করে দেখুন।

আপনি যদি JavaScript এর এরকম মজার, গল্পভিত্তিক ব্যাখ্যা ভালোবাসেন তাহলে Programming Hero’র PH BOOK আপনার জন্য একদম পারফেক্ট। বাস্তব উদাহরণ, মজা আর হাস্যরসের ছোঁয়ায় আমরা কঠিন কনসেপ্টগুলোকে করে তুলেছি একেবারে সহজ ও উপভোগ্য।