Agar Frontend developer bo’lsangiz, qisqa vaqt ichida bir necha marotaba ishlaydigan kodlarga to’g’ri kelgan bo’lsangiz kerak. Ba’zi holatlar bo’ladi ularni biz optimization qillishimiz kerak bo’ladi. Masalan, foydalanuvchi inputga nimanidir kiritayotganida backenddan suggestions larni olib kelishimiz kerak bo’ladi yoki sahifa o’lchami o’zgarganida layoutni moslashtiradigan resize eventi bo’lishi mumkin. Bunaqa holatda kodingizni juda tez-tez ishga tushurishni xohlamaysiz, chunki bu ortiqcha API requestlar’ga, performance tushib ketishiga yoki yuqori GPU sarfiga olib keladi.
Bu muammoni hal qilish uchun siz debouncing va throttling deb ataluvchi ikkita texnikadan foydalanishingiz mumkin.
Ushbu maqolada biz debouncing va throtling nima ekanini, ularning farqini va Javascript’da qanday amalga oshirish mumkinligini ko’rib chiqamiz.
Debouncing nima?
Foydalanuvchi ma’lum bir amalni bajarishdan to’xtatganidan keyin, ma’lum bir vaqt o’tgach funksiyani call qiladigan texnika. Ya’ni, ma’lum bir event ketma ket bajarilayotgan bo’lsa funksiya doimiy call qilinmaydi, faqatgina ma’lum vaqtdan so’ng bajariladi. Masalan, foydalanuvchi qidirayotgan ma’lumotlarni bekenddan olib keluvchi funksiyani debounce qilish mumkin. Shunda API request foydalanuvchi yozishni to’xtatganidan keyin ma’lum vaqt o’tgach bajariladi. Bu ortiqcha requestlar sonini kamaytidagi va serverni keraksiz yuklamalardan himoya qiladi.
JavaScript’da debouncing function:
Biz setTimeout yordamida taymer qo’yishimiz va clearTimeout yordamida avvalgi taymerni cancel qilishimiz mumkin. Shunda foydalanuvchi yana amal bajarsa, taymer yangidan boshlanadi va funksiya oxirgi urinishdan keyin ma’lum vaqt o’tgach ishga tushadi.
function searchHandler(query) {
getSearchResults(query); // API request
}
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
const debouncedSearchHandler = debounce(searchHandler, 500);
searchBar.addEventListener("input", (event) => {
const query = event.target.value;
debouncedSearchHandler(query);
});
Throttling nima?
Bu funksiya ma’lum bir vaqt oralig’ida faqat bir marotaba bajarilishini ta’minlaydigan texnika. Masalan, sahifa o’lchami o’zgarganida layoutni update qiluvchi funksiyani throttle qilib, uni har 100 ms da bir marotaba ishlatish mumkin. Bu kodni ortiqcha execute bo’lishini oldini oladi va layoutni smooth qiladi.
JavaScript’da throttling function yozamiz:
Biz isRunning nomli flag declare qilib funksiya hozir bajarilayotganini aniqlashimiz mumkin. Funksiya run bo’lishni boshlaganida flag true bo’ladi va setTimeout orqali belgilangan vaqt o’tganidan keyin false ga qaytariladi.
function updateLayout() {}
function throttle(func, interval) {
let isRunning = false;
return function (...args) {
if (!isRunning) {
isRunning = true;
func.apply(this, args);
setTimeout(() => {
isRunning = false;
}, interval);
}
};
}
const throttledUpdateLayout = throttle(updateLayout, 100);
window.addEventListener("resize", () => {
throttledUpdateLayout();
});
Xulosa qilib aytganda bu ikkita texnika performance optimization va UX uchun katta foyda beradi. Shunchaki har birini kerakli joyda qo’llashni bilishimiz kerak.
Telegram kanalimga obuna bo’ling: @usmanov_dev
Blogim orqali o’qish: https://www.azizziy.uz/blog/event-throttling-va-debouncing
Top comments (0)