A brief discussion on the Throttle and Debounce Patterns. Where, when and why to use them? They solve some problems that may harm the performance of an entire web app due to misuse of user events.
34. LET’S
THROOOOTLE IT
var paralax = function(args){
complexHeavyShit();
};
!
window.addEventListener(‘scroll’,
throttleParalax()
);
35. var throttleParalax = (function(){
var timeWindow = 500;
var now = (new Date()).getTime();
var lastExecution = new Date(now - timeWindow);
!
var paralax = function(args){
complexHeavyShit();
};
!
return function(){
var now = (new Date()).getTime();
if(lastExecution.getTime() + timeWindow <= now){
lastExecution = new Date();
return paralax.apply(this, arguments);
}
};
}());
36. var throttleParalax = (function(){
var timeWindow = 500;
var now = (new Date()).getTime();
var lastExecution = new Date(now - timeWindow);
!
var paralax = function(args){
complexHeavyShit();
};
!
return function(){
var now = (new Date()).getTime();
if(lastExecution.getTime() + timeWindow <= now){
lastExecution = new Date();
return paralax.apply(this, arguments);
}
};
}());
sets
a context
37. var throttleParalax = (function(){
var timeWindow = 500;
var now = (new Date()).getTime();
var lastExecution = new Date(now - timeWindow);
!
var paralax = function(args){
complexHeavyShit();
};
!
return function(){
var now = (new Date()).getTime();
if(lastExecution.getTime() + timeWindow <= now){
lastExecution = new Date();
return paralax.apply(this, arguments);
}
};
}());
sets
the func.
38. var throttleParalax = (function(){
var timeWindow = 500;
var now = (new Date()).getTime();
var lastExecution = new Date(now - timeWindow);
!
var paralax = function(args){
complexHeavyShit();
};
!
return function(){
var now = (new Date()).getTime();
if(lastExecution.getTime() + timeWindow <= now){
lastExecution = new Date();
return paralax.apply(this, arguments);
}
};
}());
returns the
event handler