Throttling Technique in javascript

let throttleTimer;
const searchBox = document.getElementById('search-box');

searchBox.addEventListener('input', function (event) {
  if (!throttleTimer) { // যদি আগের কল থেকে নির্দিষ্ট সময় (৫০০ms) না কেটে থাকে
    console.log("Searching for:", event.target.value);

    throttleTimer = setTimeout(() => {
      throttleTimer = null; // ৫০০ms পর আবার নতুন কল করার অনুমতি দেবে
    }, 500);
  }
});

Explaination

• "h" টাইপ করলে কী হবে?
  • শুরুতে throttleTimer ফাঁকা থাকে

let throttleTimer; // undefined

• if (!throttleTimer) চেক করবে → যেহেতু throttleTimer ফাঁকা, এটি true হবে
  • শুরুতে throttleTimer ফাঁকা থাকে

if (!undefined) { // সত্য হবে, তাই ভেতরের কোড চলবে

• সার্চ লগ হবে

console.log("Searching for: h");

if (!undefined) { // সত্য হবে, তাই ভেতরের কোড চলবে

• throttleTimer সেট হয়ে যাবে, যাতে পরবর্তী ৫০০ms পর্যন্ত নতুন সার্চ না হয়

throttleTimer = setTimeout(() => {
    throttleTimer = null; // ৫০০ms পরে null হয়ে যাবে, যাতে আবার সার্চ চালানো যায়
}, 500);

• "he" টাইপ করলে ১০০ms পরে কী হবে?
  • এখন throttleTimer তে একটি টাইমার সেট আছে, তাই if (!throttleTimer) FALSE হয়ে যাবে
  • ফলে console.log("Searching for: he") চলবে না!

Short explaination

• প্রথমবার if (!throttleTimer) true হয়, তাই ফাংশন চলে।
• এরপর ৫০০ms এর জন্য এটি false করে রাখা হয়, যাতে একই কোড বারবার না চলে।
• ৫০০ms পরে throttleTimer = null; সেট হয়, ফলে আবার if (!throttleTimer) true হয়ে যায়, এবং পরবর্তী ইনপুট লগ হয়।