Funksioni i debounce është i dobishëm nëse keni një kthim thirrjeje të bashkangjitur me një ngjarje asinkrone dhe dëshironi që kjo kthim të ekzekutohet disa kohë pas një shpërthimi ngjarjesh. Operacionet intensive në kohë mund të ndalojnë aplikacionin tonë, kështu që është praktikë e mirë t'i mbështillni ato thirrje mbrapa me një debounce.
Funksioni debounce pranon tre parametra, kthimin e thirrjes, kohën e pritjes dhe një flamur të menjëhershëm që përcakton nëse ekzekutojmë në skajin kryesor ose në fund.
function debounce(callback, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) callback.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) callback.apply(context, args);
};
};
setTimeout kthen një timerID që e identifikon atë në mënyrë unike. TimerID mund t'i jepet clearTimeout(timerID), i cili mohon setTimeout. TimerID është më i madh se zero dhe po kështu është 'e vërteta'. Debounce është një fabrikë funksioni që mban referencë për ndryshoren e afatit në një fushë mbylljeje, prandaj të gjitha funksionet e krijuara kanë qasje në variablin e afatit. Variabla e skadimit shërben si një flamur Boolean dhe një referencë unike për ekzekutimin e mëparshëm setTimeOut. Sa herë që ekzekutohet një tjetër thirrje mbrapa, setTimeout-i i mëparshëm pastrohet dhe një tjetër ekzekutohet menjëherë pas.
Për të ilustruar dobinë e debounce, le të shkruajmë një funksion që regjistron kohën dhe argumentin e vargut dhe ta mbështjellim atë me dekoruesin e debounce.
function print(string){
time = new Date()
console.log(string,time.getUTCMilliseconds())
}
debouncedPrint = debounce(print,100)
debouncedPrint(‘first’)
debouncedPrint(‘second’)
debouncedPrint(‘third’)
debouncedPrint(‘fourth’)
// > fourth 319
// only the last callback was executed
Për më tepër, le të shkruajmë një funksion në radhë, i cili garanton që kthimi i thirrjes do të ekzekutohet me të paktën një ndarje kohore të caktuar.
function queue(func,time){
var step = time
return function(){
var args = arguments, context = this
time += step
setTimeout(function(){func.apply(context,args)},time)
}
}
// lets wrap the debounced print with the queue decorator giving a separation of 150
printSeparatedby150 = queue(debouncedPrint,150)
printSeparatedby150(‘first’)
printSeparatedby150(‘second’)
printSeparatedby150(‘third’)
printSeparatedby150(‘fourth’)
// >first 282
// >second 431
// >third 582
// >fourth 732
// since the callbacks where called with a separation of greater than 100, the debounce time limit, each callback was executed
Tani le ta zvogëlojmë ndarjen në më pak se kufiri kohor i daljes
printSeparatedby50 = queue(debouncedPrint,99) printSeparatedby50(‘first’) printSeparatedby50(‘second’) printSeparatedby50(‘third’) printSeparatedby50(‘fourth’) // > fourth 672 // which is expected
