throttle and debounce patterns in web apps
DESCRIPTION
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.TRANSCRIPT
![Page 1: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/1.jpg)
PATTERNS IN WEB APPS
THROTTLE &
DEBOUNCE
@ALMIRFILHO
![Page 2: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/2.jpg)
@almirfilho
@loopinfinito
l8p.com.br
![Page 3: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/3.jpg)
@almirfilho
@loopinfinito
l8p.com.br
![Page 4: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/4.jpg)
@almirfilho
@loopinfinito
l8p.com.br
after conf
![Page 5: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/5.jpg)
THE PROBLEM
![Page 6: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/6.jpg)
How to control user events frequency?
![Page 7: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/7.jpg)
onclick onresize onscroll onmousemove
SOME CASES
![Page 8: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/8.jpg)
onclickOrder some shit
Some AJAX action. Whatever
…
![Page 9: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/9.jpg)
onclickOrder some shit
Some AJAX action. Whatever
click
freak
![Page 10: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/10.jpg)
onresizeResponsive modafoca
![Page 11: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/11.jpg)
onresize
∆ = 100px
triggerings! !%?#$
≃ 100 *
Responsive modafoca
![Page 12: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/12.jpg)
onscrollParalax bullshit
![Page 13: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/13.jpg)
onscroll
∆ = 100px… same fuc*ing
thing
≃
Paralax bullshit
![Page 14: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/14.jpg)
onmousemoveGaming junk
![Page 15: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/15.jpg)
onmousemove
∆x = 100px ∆y = 50px
trigg… OMG plz stop
≃ 150 *
Gaming junk
![Page 16: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/16.jpg)
**BONUS** PROBLEM
![Page 17: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/17.jpg)
Updating <canvas> drawings?
![Page 18: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/18.jpg)
just redraw E-V-E -R -Y-T-H- I -N-G
Updating <canvas> drawings?
![Page 19: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/19.jpg)
stage.update = function(){ redrawHeavyShit(); }; !
while(game.isOn){ game.step(); stage.update(); }
stupid game loop
![Page 20: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/20.jpg)
stage.update = function(){ redrawHeavyShit(); }; !var gameLoop = function(){ game.step(); stage.update(); requestAnimationFrame(gameLoop); }; !gameLoop();
WAY COOLER
![Page 21: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/21.jpg)
stage.update = function(){ redrawHeavyShit(); }; !var gameLoop = function(){ game.step(); stage.update(); requestAnimationFrame(gameLoop); }; !gameLoop();
WAY COOLER
![Page 22: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/22.jpg)
Measuring damage with
dev tools
![Page 23: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/23.jpg)
RENDERING & PAINTING COSTS
all major and modern* browsers * even in IE (11)
![Page 24: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/24.jpg)
So, how to control user events frequency?
![Page 25: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/25.jpg)
THROTTLE
![Page 26: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/26.jpg)
A throttle is a mechanism to
manage fuel flow in an engine
![Page 27: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/27.jpg)
ENGINE THROTTLE
![Page 28: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/28.jpg)
So, throttle is just a valve?
!yeeep
![Page 29: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/29.jpg)
resizing scrolling
mouse moving
COMMON CASES
![Page 30: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/30.jpg)
tE E E E E E E E E E E
onscroll
paralax()
0.1s0s
![Page 31: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/31.jpg)
tE E E E E E E E E E E
onscroll throttled
paralax()
0.1s0s
THROTTLE
![Page 32: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/32.jpg)
tE E E E E E E E E E E
onscroll throttled
paralax()
0.1s0s
THROTTLE
![Page 33: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/33.jpg)
var paralax = function(args){ complexHeavyShit(); }; !
window.addEventListener(‘scroll’, function(e){ paralax(e.args); });
![Page 34: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/34.jpg)
var paralax = function(args){ complexHeavyShit(); }; !
window.addEventListener(‘scroll’, throttleParalax() );
LET’S THROOOOTLE IT
![Page 35: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/35.jpg)
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); } }; }());
![Page 36: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/36.jpg)
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
![Page 37: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/37.jpg)
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.
![Page 38: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/38.jpg)
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
![Page 39: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/39.jpg)
Let’s visualize it
![Page 40: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/40.jpg)
tE
500ms0s
event
happens
Let’s visualize it
![Page 41: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/41.jpg)
t
500ms0s
E
Let’s visualize it
event executes
![Page 42: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/42.jpg)
t
500ms0s
100msE
timeWindow
Let’s visualize it
![Page 43: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/43.jpg)
t
500ms0s
100msE
Let’s visualize it
another event
happens
E
![Page 44: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/44.jpg)
t
500ms0s
100msE
Let’s visualize it
no execution
E
![Page 45: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/45.jpg)
t
500ms0s
100msE
Let’s visualize it
event
happens
E E
![Page 46: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/46.jpg)
t
500ms0s
100msE
Let’s visualize it
same thing
now
E E
![Page 47: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/47.jpg)
t
500ms0s
100msE
Let’s visualize itE 100msE
![Page 48: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/48.jpg)
t
500ms0s
100msE
Let’s visualize itE 100msE E E E
![Page 49: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/49.jpg)
DEBOUNCE
![Page 50: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/50.jpg)
A debouncing is a technique to
guarantee that a button was pressed
only once.
![Page 51: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/51.jpg)
ELECTRONIC DEBOUNCING
![Page 52: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/52.jpg)
Debounce cancels multiple actions for postpone to the
last one.
![Page 53: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/53.jpg)
clicking key pressing
COMMON CASES
![Page 54: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/54.jpg)
tE E E E E E E E E
onkeyup
autoComplete()
1s0s
![Page 55: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/55.jpg)
tE E E E E E E E E
onkeyup debouncing1s0s
DEBOUNCE
autoComplete()
![Page 56: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/56.jpg)
tE E E E E E E E E
onkeyup debouncing1s0s
DEBOUNCE
autoComplete()
![Page 57: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/57.jpg)
btn.addEventListener(‘keyup’, function(){ autoComplete(); });
![Page 58: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/58.jpg)
btn.addEventListener(‘keyup’, debounceAutoComplete() );
LET’S DEBOOOUNCE IT
![Page 59: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/59.jpg)
var debounceAutoComplete = (function(){ var timeWindow = 100; var timeout; ! var autoComplete = function(arg1, arg2){/* … */}; ! return function(){ var context = this; var args = arguments; clearTimeout(timeout); timeout = setTimeout(function(){ autoComplete.apply(context, args); }, timeWindow); }; }());
![Page 60: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/60.jpg)
var debounceAutoComplete = (function(){ var timeWindow = 100; var timeout; ! var autoComplete = function(arg1, arg2){/* … */}; ! return function(){ var context = this; var args = arguments; clearTimeout(timeout); timeout = setTimeout(function(){ autoComplete.apply(context, args); }, timeWindow); }; }());
sets a context
![Page 61: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/61.jpg)
var debounceAutoComplete = (function(){ var timeWindow = 100; var timeout; ! var autoComplete = function(arg1, arg2){/* … */}; ! return function(){ var context = this; var args = arguments; clearTimeout(timeout); timeout = setTimeout(function(){ autoComplete.apply(context, args); }, timeWindow); }; }());
sets the func.
![Page 62: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/62.jpg)
var debounceAutoComplete = (function(){ var timeWindow = 100; var timeout; ! var autoComplete = function(arg1, arg2){/* … */}; ! return function(){ var context = this; var args = arguments; clearTimeout(timeout); timeout = setTimeout(function(){ autoComplete.apply(context, args); }, timeWindow); }; }());
return the
handler
![Page 63: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/63.jpg)
Let’s visualize it
![Page 64: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/64.jpg)
tE
500ms0s
event
happens
Let’s visualize it
![Page 65: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/65.jpg)
t
500ms0s
100msE
setTimeOut
Let’s visualize it
![Page 66: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/66.jpg)
t
500ms0s
100msE
another event
happens
E
Let’s visualize it
![Page 67: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/67.jpg)
t
500ms0s
100msE
clearTimeOut
E
Let’s visualize it
![Page 68: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/68.jpg)
t
500ms0s
100msE
reset
timeOut
E
Let’s visualize it
![Page 69: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/69.jpg)
t
500ms0s
100msE E E
Let’s visualize it
![Page 70: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/70.jpg)
t
500ms0s
100msE E E
Let’s visualize it
![Page 71: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/71.jpg)
t
500ms0s
100msE E E
Let’s visualize it
![Page 72: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/72.jpg)
t
500ms0s
100msE E E
cool to execute!
Let’s visualize it
![Page 73: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/73.jpg)
t
500ms0s
100msE E E
life goes on…
E
Let’s visualize it
![Page 74: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/74.jpg)
READ ABOUT [PT-BR]
![Page 75: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/75.jpg)
but… <x-mimimi>
![Page 76: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/76.jpg)
$(window).scroll($.throttle(250, paralax)); !
$('input').keyup($.debounce(250, autoComplete));
JQUERY PLUGINjquery-throttle-debounce
github.com/cowboy/jquery-throttle-debounce
![Page 77: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/77.jpg)
UNDERSCORE.JS
underscorejs.org
$(window).scroll(_.throttle(paralax, 250)); !
$(‘input’).keyup(_.debounce(autoComplete, 250));
![Page 78: Throttle and Debounce Patterns in Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051312/5476d500b4af9f9c3f8b4598/html5/thumbnails/78.jpg)
THANK YOU!
@ALMIRFILHO