Debounce Technique in javascript

let debounceTimer; const searchBox = document.getElementById('search-box'); searchBox.addEventListener('input', function(event) { clearTimeout(debounceTimer); // আগের টাইমার বন্ধ করে নতুন টাইমার সেট করা হয় debounceTimer = setTimeout(function() { console.log("Searching for:", event.target.value); }, 500); // ৫০০ মিলিসেকেন্ড (০.৫ সেকেন্ড) পর এক্সিকিউট হবে }); Explaination তুমি যখন কোনো অক্ষর টাইপ করো, তখন input ইভেন্ট ট্রিগার হয়, এবং নিচের কোড রান হয়: clearTimeout(debounceTimer); Explaination নতুন টাইমার সেট হয়: debounceTimer = setTimeout(function() { console.log("Searching for:", event.target.value); }, 500); Explaination নতুন টাইমার সেট হয়: debounceTimer = setTimeout(function() { console.log("Searching for:", event.target.value); }, 500); এটি বলে: "৫০০ মিলিসেকেন্ড (০.৫ সেকেন্ড) অপেক্ষা করো, তারপর সার্চ করো।" তুমি যদি আবার টাইপ করো (০.৫ সেকেন্ডের মধ্যে), আগের টাইমার বাতিল হয় অর্থাৎ, তুমি যদি দ্রুত টাইপ করতে থাকো, তাহলে প্রতিবার clearTimeout() আগের setTimeout মুছে ফেলে এবং নতুন করে ৫০০ms কাউন্ট শুরু করে। সার্চ অপারেশন তখনই হবে, যখন ইউজার শেষ অক্ষর লেখার পর ০.৫ সেকেন্ড থামবে।

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

searchBox.addEventListener('input', function(event) {
  clearTimeout(debounceTimer); // আগের টাইমার বন্ধ করে নতুন টাইমার সেট করা হয়
  debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
  }, 500); // ৫০০ মিলিসেকেন্ড (০.৫ সেকেন্ড) পর এক্সিকিউট হবে
});

clearTimeout(debounceTimer);

debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
}, 500);

debounceTimer = setTimeout(function() {
    console.log("Searching for:", event.target.value);
}, 500);

Related Posts

Marketing Automation: Implement a Single Source of Truth

Feb 28, 2025  0

Ditching the Overhead: My Experience with Go, HTMX, Tai...

Mar 12, 2025  0

Most Expensive NFT: 4 Mistakes New Investors Avoid

Feb 15, 2025  0