இரண்டும் வேகமான, மீண்டும் மீண்டும் நிகழும் நிகழ்வுகளுக்கு பதிலளிக்கும் விதமாக ஒரு செயல்பாடு எத்தனை முறை இயங்குகிறது என்பதை கட்டுப்படுத்துகின்றன — ஆனால் வெவ்வேறு நேர কৌশல்களுடன்.
events: x x x x x x x ........ x x x
debounce: ↑ (fires once, after the pause)
throttle: ↑ ↑ ↑ ↑ (fires periodically)
function debounce(fn, ms) {
let timer;
return (...args) => {
clearTimeout(timer); // cancel the previous scheduled call
timer = setTimeout(() => fn(...args), ms); // schedule a new one
};
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
function throttle(fn, ms) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
};
}
இரண்டும் விலையுயர்ந்த வேலை (API அழைப்புகள், தளவமைப்பு மறுக்கணக்கு) நொடிக்கு நூற்றுக்கணக்கான முறை நிகழ்வதைத் தடுக்கின்றன, இது முக்கியமான front-end செயல்திறன் நுட்பமாகும்.
Lodash போன்ற நூலகங்கள் leading/trailing விருப்பங்கள் கொண்ட உறுதியான பதிப்புகளை வழங்குகின்றன.