Throttling husaidia kudhibiti idadi ya function calls wakati wa scroll events, kurahisisha performance na kuzuia browser lag, tofauti na debouncing ambayo hufanya function iitwe baada ya delay.
✅ A. HTML Example
<div class="scroll-box">
<p>Scroll chini kuona throttled events...</p>
<div style="height:2000px;"></div>
</div>
✅ B. JavaScript Throttle Function
// Throttle function
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function(...args) {
if (!lastRan) {
func.apply(this, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if ((Date.now() - lastRan) >= limit) {
func.apply(this, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
// Example scroll handler
function scrollHandler() {
console.log('Scroll event at', window.scrollY);
}
// Attach throttled scroll
window.addEventListener('scroll', throttle(scrollHandler, 500));
✅ Jinsi Inavyofanya Kazi
throttle → inahakikisha function inaitwa maximum mara moja kwa kila interval
Inapunguza function calls kwenye scroll, resize, au mousemove events
Bora kwa animations, sticky elements, lazy-loading, au parallax effects
🔗 Links Za Kujifunza Zaidi
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 WhatsApp Msaada:
https://wa.me/255693118509