Faisal Ahmedlet 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 কাউন্ট শুরু করে।
- সার্চ অপারেশন তখনই হবে, যখন ইউজার শেষ অক্ষর লেখার পর ০.৫ সেকেন্ড থামবে।
