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 হয়ে যায়, এবং পরবর্তী ইনপুট লগ হয়।

Feb 19, 2025 - 04:54

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 হয়ে যায়, এবং পরবর্তী ইনপুট লগ হয়।