برنامه نویسی
تکنیک را در JavaScript – Community Dev

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
- هنگامی که یک نامه را تایپ می کنید ، رویداد ورودی ماشه است و کد زیر اجرا می شود:
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);
- آمده است: “صبر کنید 1 میلی ثانیه (1.5 ثانیه) ، سپس جستجو کنید.”
- اگر دوباره تایپ کنید (در فاصله 1.5 ثانیه) ، تایمر قبلی لغو می شود
- یعنی اگر سریع تایپ می کنید ، هر بار ClearTimeOut () SettimeOut قبلی را حذف می کند و تعداد 5ms جدید را شروع می کند.
- عملیات جستجو تنها زمانی خواهد بود که کاربر پس از نوشتن آخرین نامه 1.5 ثانیه متوقف شود.