Debounce Technique in javascript

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

searchBox.addEventListener(‘input’, function(event) {
clearTimeout(debounceTimer); // আগের টাইমার বন্ধ করে নতুন টাইমার সেট করা হয়
debounceTimer = setTimeout(function() {
…


This content originally appeared on DEV Community and was authored by Faisal Ahmed

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


This content originally appeared on DEV Community and was authored by Faisal Ahmed


Print Share Comment Cite Upload Translate Updates
APA

Faisal Ahmed | Sciencx (2025-02-19T03:11:35+00:00) Debounce Technique in javascript. Retrieved from https://www.scien.cx/2025/02/19/debounce-technique-in-javascript/

MLA
" » Debounce Technique in javascript." Faisal Ahmed | Sciencx - Wednesday February 19, 2025, https://www.scien.cx/2025/02/19/debounce-technique-in-javascript/
HARVARD
Faisal Ahmed | Sciencx Wednesday February 19, 2025 » Debounce Technique in javascript., viewed ,<https://www.scien.cx/2025/02/19/debounce-technique-in-javascript/>
VANCOUVER
Faisal Ahmed | Sciencx - » Debounce Technique in javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/19/debounce-technique-in-javascript/
CHICAGO
" » Debounce Technique in javascript." Faisal Ahmed | Sciencx - Accessed . https://www.scien.cx/2025/02/19/debounce-technique-in-javascript/
IEEE
" » Debounce Technique in javascript." Faisal Ahmed | Sciencx [Online]. Available: https://www.scien.cx/2025/02/19/debounce-technique-in-javascript/. [Accessed: ]
rf:citation
» Debounce Technique in javascript | Faisal Ahmed | Sciencx | https://www.scien.cx/2025/02/19/debounce-technique-in-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts