Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
THROTTLE & DEBOUNCE 
PATTERNS 
IN WEB APPS 
@ALMIRFILHO
@loopinfinito 
l8p.com.br 
@almirfilho
@loopinfinito 
l8p.com.br 
@almirfilho
@loopinfinito 
l8p.com.br 
@almirfilho 
after 
conf
THE PROBLEM
How to control 
user events 
frequency?
SOME CASES 
onclick 
onresize 
onscroll 
onmousemove
onclick 
Order some shit 
… 
Some AJAX action. Whatever
onclick 
Order some shit 
Some AJAX action. Whatever 
click 
freak
onresize 
Responsive modafoca
onresize 
Δ = 100px 
≃ 100 * 
triggerings! 
!%?#$ 
Responsive modafoca
onscroll 
Paralax bullshit
onscroll 
Δ = 100px 
… same 
fuc*ing 
thing 
≃ 
Paralax bullshit
onmousemove 
Gaming junk
onmousemove 
Δx = 100px 
Δy = 50px 
≃ 150 * 
trigg… OMG 
plz stop 
Gaming junk
**BONUS** PROBLEM
Updating <canvas> 
drawings?
Updating <canvas> 
drawings? 
just redraw 
E-V-E-R-Y-T-H-I-N-G
stage.update = function(){ 
redrawHeavyShit(); 
}; 
! 
while(game.isOn){ 
game.step(); 
stage.update(); 
} 
stupid 
game l...
WAY COOLER 
stage.update = function(){ 
redrawHeavyShit(); 
}; 
! 
var gameLoop = function(){ 
game.step(); 
stage.update(...
WAY COOLER 
stage.update = function(){ 
redrawHeavyShit(); 
}; 
! 
var gameLoop = function(){ 
game.step(); 
stage.update(...
Measuring 
damage with 
dev tools
RENDERING & PAINTING COSTS 
all major and modern* browsers 
* even in IE (11)
So, how to control 
user events 
frequency?
THROTTLE
A throttle is a 
mechanism to 
manage fuel flow 
in an engine
ENGINE THROTTLE
So, throttle is just a 
valve? 
! yeeep
COMMON CASES 
resizing 
scrolling 
mouse moving
0s 0.1s 
t 
onscroll 
E E E E E E E E E E E 
paralax()
onscroll throttled 
0s 0.1s 
t 
E E E E E E E E E E E 
THROTTLE 
paralax()
onscroll throttled 
0s 0.1s 
t 
E E E E E E E E E E E 
THROTTLE 
paralax()
var paralax = function(args){ 
complexHeavyShit(); 
}; 
! 
window.addEventListener(‘scroll’, function(e){ 
paralax(e.args)...
LET’S 
THROOOOTLE IT 
var paralax = function(args){ 
complexHeavyShit(); 
}; 
! 
window.addEventListener(‘scroll’, 
thrott...
var throttleParalax = (function(){ 
var timeWindow = 500; 
var now = (new Date()).getTime(); 
var lastExecution = new Date...
var throttleParalax = (function(){ 
var timeWindow = 500; 
var now = (new Date()).getTime(); 
var lastExecution = new Date...
var throttleParalax = (function(){ 
var timeWindow = 500; 
var now = (new Date()).getTime(); 
var lastExecution = new Date...
var throttleParalax = (function(){ 
var timeWindow = 500; 
var now = (new Date()).getTime(); 
var lastExecution = new Date...
Let’s visualize it
Let’s visualize it 
0s 500ms 
t 
E 
event 
happens
Let’s visualize it 
0s 500ms 
t 
E 
event 
executes
Let’s visualize it 
0s 500ms 
t 
E 100ms 
timeWindow
Let’s visualize it 
0s 500ms 
t 
E 100ms 
E 
another event 
happens
Let’s visualize it 
0s 500ms 
t 
E 100ms 
E 
no execution
Let’s visualize it 
0s 500ms 
t 
E 100ms 
E E 
event 
happens
Let’s visualize it 
0s 500ms 
t 
E 100ms 
E E 
same thing 
now
Let’s visualize it 
0s 500ms 
t 
E 100ms 
E E 100ms
Let’s visualize it 
0s 500ms 
t 
E 100ms 
E E 1E00msE E
DEBOUNCE
A debouncing is a 
technique to 
guarantee that a 
button was pressed 
only once.
ELECTRONIC 
DEBOUNCING
Debounce cancels 
multiple actions for 
postpone to the 
last one.
COMMON CASES 
clicking 
key pressing
0s 1s 
t 
onkeyup 
E E E E E E E E E 
autoComplete()
onkeyup debouncing 
0s 1s 
t 
E E E E E E E E E 
DEBOUNCE 
autoComplete()
onkeyup debouncing 
0s 1s 
t 
E E E E E E E E E 
DEBOUNCE 
autoComplete()
btn.addEventListener(‘keyup’, function(){ 
autoComplete(); 
});
LET’S 
DEBOOOUNCE IT 
btn.addEventListener(‘keyup’, 
debounceAutoComplete() 
);
var debounceAutoComplete = (function(){ 
var timeWindow = 100; 
var timeout; 
! 
var autoComplete = function(arg1, arg2){/...
var debounceAutoComplete = (function(){ 
var timeWindow = 100; 
sets 
var timeout; 
a context 
! 
var autoComplete = funct...
var debounceAutoComplete = (function(){ 
var timeWindow = 100; 
var timeout; 
! 
var autoComplete = function(arg1, arg2){/...
var debounceAutoComplete = (function(){ 
var timeWindow = 100; 
var timeout; 
! 
var autoComplete = function(arg1, arg2){/...
Let’s visualize it
Let’s visualize it 
0s 500ms 
t 
E 
event 
happens
Let’s visualize it 
0s 500ms 
t 
E 100ms 
setTimeOut
Let’s visualize it 
0s 500ms 
t 
E 100ms 
E 
another event 
happens
Let’s visualize it 
0s 500ms 
t 
E 100ms 
E 
clearTimeOut
Let’s visualize it 
0s 500ms 
t 
E 100ms 
reset 
timeOut 
E
Let’s visualize it 
0s 500ms 
t 
E E 10E0ms
Let’s visualize it 
0s 500ms 
t 
E E 10E0ms
Let’s visualize it 
0s 500ms 
t 
E E E 100ms
Let’s visualize it 
0s 500ms 
t 
E E E 100ms 
cool to 
execute!
Let’s visualize it 
0s 500ms 
t 
E E E 100ms 
E 
life goes on…
READ ABOUT [PT-BR]
but… 
<x-mimimi>
JQUERY PLUGIN 
jquery-throttle-debounce 
$(window).scroll($.throttle(250, paralax)); 
! 
$('input').keyup($.debounce(250, ...
UNDERSCORE.JS 
$(window).scroll(_.throttle(paralax, 250)); 
! 
$(‘input’).keyup(_.debounce(autoComplete, 250)); 
underscor...
THANK 
YOU! 
@ALMIRFILHO
Upcoming SlideShare
Loading in …5
×

Throttle and Debounce Patterns in Web Apps

1,727 views

Published on

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.

Published in: Software

Throttle and Debounce Patterns in Web Apps

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

×