💡 ??️ টাইপ করলেই API কল বন্ধ রাখুন: Debounce দিয়ে সার্চ ঠিক করুন
সার্চ বক্সে আপনি টাইপ করলেই যদি বার বার API কল হয়, পেজ ধীর হয়ে যায় 😵💫 এটা ঠিক করতে Debounce ব্যবহার করুন। মানে: ইউজার কিছুক্ষণ টাইপ থামলে তারপরই রিকোয়েস্ট পাঠাবেন ⏳🙂
✅ কীভাবে করবেন (সিম্পল জাভাস্ক্রিপ্ট)
1. একটি debounce ফাংশন বানান
2. input ইভেন্টে সরাসরি API না ডেকে debounce করা ফাংশন কল করুন
3. টাইপ থামলেই সেই লেটেস্ট ভ্যালু দিয়ে fetch চালান
কোড (খুব ছোট):
function debounce(fn, wait){
let t;
return (...args)=>{
clearTimeout(t);
t=setTimeout(()=>fn(...args), wait);
};
}
const onSearch = debounce((q)=>{
// এখানে fetch/axios কল করুন
console.log("search:", q);
}, 300);
document.querySelector("input").addEventListener("input",(e)=>{
onSearch(e.target.value);
});
⚠️ সাবধানতা: wait টাইমটা বেশি হলে সার্চ রেসপন্স দেরি লাগতে পারে, খুব কম হলে আবার বার বার কল হতে পারে। 200-500 এর মধ্যে ট্রাই করে আপনার ইউজার ফ্লো মিলিয়ে নিন 📌
এভাবে পারফরম্যান্স ভালো থাকবে 🚀 এবং অপ্রয়োজনীয় রিকোয়েস্টও কমবে 🌿 আপনি কি আপনার প্রজেক্টে সার্চ বক্সে debounce ব্যবহার করেন? কমেন্টে আপনার পদ্ধতি জানান 😊
#javascript_debounce #debounce_search #frontend_perf #event_handling
সার্চ বক্সে আপনি টাইপ করলেই যদি বার বার API কল হয়, পেজ ধীর হয়ে যায় 😵💫 এটা ঠিক করতে Debounce ব্যবহার করুন। মানে: ইউজার কিছুক্ষণ টাইপ থামলে তারপরই রিকোয়েস্ট পাঠাবেন ⏳🙂
✅ কীভাবে করবেন (সিম্পল জাভাস্ক্রিপ্ট)
1. একটি debounce ফাংশন বানান
2. input ইভেন্টে সরাসরি API না ডেকে debounce করা ফাংশন কল করুন
3. টাইপ থামলেই সেই লেটেস্ট ভ্যালু দিয়ে fetch চালান
কোড (খুব ছোট):
function debounce(fn, wait){
let t;
return (...args)=>{
clearTimeout(t);
t=setTimeout(()=>fn(...args), wait);
};
}
const onSearch = debounce((q)=>{
// এখানে fetch/axios কল করুন
console.log("search:", q);
}, 300);
document.querySelector("input").addEventListener("input",(e)=>{
onSearch(e.target.value);
});
⚠️ সাবধানতা: wait টাইমটা বেশি হলে সার্চ রেসপন্স দেরি লাগতে পারে, খুব কম হলে আবার বার বার কল হতে পারে। 200-500 এর মধ্যে ট্রাই করে আপনার ইউজার ফ্লো মিলিয়ে নিন 📌
এভাবে পারফরম্যান্স ভালো থাকবে 🚀 এবং অপ্রয়োজনীয় রিকোয়েস্টও কমবে 🌿 আপনি কি আপনার প্রজেক্টে সার্চ বক্সে debounce ব্যবহার করেন? কমেন্টে আপনার পদ্ধতি জানান 😊
#javascript_debounce #debounce_search #frontend_perf #event_handling
💡 ??️ টাইপ করলেই API কল বন্ধ রাখুন: Debounce দিয়ে সার্চ ঠিক করুন
সার্চ বক্সে আপনি টাইপ করলেই যদি বার বার API কল হয়, পেজ ধীর হয়ে যায় 😵💫 এটা ঠিক করতে Debounce ব্যবহার করুন। মানে: ইউজার কিছুক্ষণ টাইপ থামলে তারপরই রিকোয়েস্ট পাঠাবেন ⏳🙂
✅ কীভাবে করবেন (সিম্পল জাভাস্ক্রিপ্ট)
1. একটি debounce ফাংশন বানান
2. input ইভেন্টে সরাসরি API না ডেকে debounce করা ফাংশন কল করুন
3. টাইপ থামলেই সেই লেটেস্ট ভ্যালু দিয়ে fetch চালান
কোড (খুব ছোট):
function debounce(fn, wait){
let t;
return (...args)=>{
clearTimeout(t);
t=setTimeout(()=>fn(...args), wait);
};
}
const onSearch = debounce((q)=>{
// এখানে fetch/axios কল করুন
console.log("search:", q);
}, 300);
document.querySelector("input").addEventListener("input",(e)=>{
onSearch(e.target.value);
});
⚠️ সাবধানতা: wait টাইমটা বেশি হলে সার্চ রেসপন্স দেরি লাগতে পারে, খুব কম হলে আবার বার বার কল হতে পারে। 200-500 এর মধ্যে ট্রাই করে আপনার ইউজার ফ্লো মিলিয়ে নিন 📌
এভাবে পারফরম্যান্স ভালো থাকবে 🚀 এবং অপ্রয়োজনীয় রিকোয়েস্টও কমবে 🌿 আপনি কি আপনার প্রজেক্টে সার্চ বক্সে debounce ব্যবহার করেন? কমেন্টে আপনার পদ্ধতি জানান 😊
#javascript_debounce #debounce_search #frontend_perf #event_handling