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.

1. THROTTLE & DEBOUNCE
PATTERNS
IN WEB APPS
@ALMIRFILHO

2. @loopinfinito
l8p.com.br
@almirfilho

3. @loopinfinito
l8p.com.br
@almirfilho

4. @loopinfinito
l8p.com.br
@almirfilho
after
conf

5. THE PROBLEM

6. How to control
user events
frequency?

7. SOME CASES
onclick
onresize
onscroll
onmousemove

8. onclick
Order some shit
…
Some AJAX action. Whatever

9. onclick
Order some shit
Some AJAX action. Whatever
click
freak

10. onresize
Responsive modafoca

11. onresize
Δ = 100px
≃ 100 *
triggerings!
!%?#$
Responsive modafoca

12. onscroll
Paralax bullshit

13. onscroll
Δ = 100px
… same
fuc*ing
thing
≃
Paralax bullshit

14. onmousemove
Gaming junk

15. onmousemove
Δx = 100px
Δy = 50px
≃ 150 *
trigg… OMG
plz stop
Gaming junk

16. **BONUS** PROBLEM

17. Updating <canvas>
drawings?

18. Updating <canvas>
drawings?
just redraw
E-V-E-R-Y-T-H-I-N-G

19. stage.update = function(){
redrawHeavyShit();
};
!
while(game.isOn){
game.step();
stage.update();
}
stupid
game loop

20. WAY COOLER
stage.update = function(){
redrawHeavyShit();
};
!
var gameLoop = function(){
game.step();
stage.update();
requestAnimationFrame(gameLoop);
};
!
gameLoop();

21. WAY COOLER
stage.update = function(){
redrawHeavyShit();
};
!
var gameLoop = function(){
game.step();
stage.update();
requestAnimationFrame(gameLoop);
};
!
gameLoop();

22. Measuring
damage with
dev tools

23. RENDERING & PAINTING COSTS
all major and modern* browsers
* even in IE (11)

24. So, how to control
user events
frequency?

25. THROTTLE

26. A throttle is a
mechanism to
manage fuel flow
in an engine

27. ENGINE THROTTLE

28. So, throttle is just a
valve?
! yeeep

29. COMMON CASES
resizing
scrolling
mouse moving

30. 0s 0.1s
t
onscroll
E E E E E E E E E E E
paralax()

31. onscroll throttled
0s 0.1s
t
E E E E E E E E E E E
THROTTLE
paralax()

32. onscroll throttled
0s 0.1s
t
E E E E E E E E E E E
THROTTLE
paralax()

33. var paralax = function(args){
complexHeavyShit();
};
!
window.addEventListener(‘scroll’, function(e){
paralax(e.args);
});

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

39. Let’s visualize it

40. Let’s visualize it
0s 500ms
t
E
event
happens

41. Let’s visualize it
0s 500ms
t
E
event
executes

42. Let’s visualize it
0s 500ms
t
E 100ms
timeWindow

43. Let’s visualize it
0s 500ms
t
E 100ms
E
another event
happens

44. Let’s visualize it
0s 500ms
t
E 100ms
E
no execution

45. Let’s visualize it
0s 500ms
t
E 100ms
E E
event
happens

46. Let’s visualize it
0s 500ms
t
E 100ms
E E
same thing
now

47. Let’s visualize it
0s 500ms
t
E 100ms
E E 100ms

48. Let’s visualize it
0s 500ms
t
E 100ms
E E 1E00msE E

49. DEBOUNCE

50. A debouncing is a
technique to
guarantee that a
button was pressed
only once.

51. ELECTRONIC
DEBOUNCING

52. Debounce cancels
multiple actions for
postpone to the
last one.

53. COMMON CASES
clicking
key pressing

54. 0s 1s
t
onkeyup
E E E E E E E E E
autoComplete()

55. onkeyup debouncing
0s 1s
t
E E E E E E E E E
DEBOUNCE
autoComplete()

56. onkeyup debouncing
0s 1s
t
E E E E E E E E E
DEBOUNCE
autoComplete()

57. btn.addEventListener(‘keyup’, function(){
autoComplete();
});

58. LET’S
DEBOOOUNCE IT
btn.addEventListener(‘keyup’,
debounceAutoComplete()
);

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. 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. 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. 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. Let’s visualize it

64. Let’s visualize it
0s 500ms
t
E
event
happens

65. Let’s visualize it
0s 500ms
t
E 100ms
setTimeOut

66. Let’s visualize it
0s 500ms
t
E 100ms
E
another event
happens

67. Let’s visualize it
0s 500ms
t
E 100ms
E
clearTimeOut

68. Let’s visualize it
0s 500ms
t
E 100ms
reset
timeOut
E

69. Let’s visualize it
0s 500ms
t
E E 10E0ms

70. Let’s visualize it
0s 500ms
t
E E 10E0ms

71. Let’s visualize it
0s 500ms
t
E E E 100ms

72. Let’s visualize it
0s 500ms
t
E E E 100ms
cool to
execute!

73. Let’s visualize it
0s 500ms
t
E E E 100ms
E
life goes on…

74. READ ABOUT [PT-BR]

75. but…
<x-mimimi>

76. JQUERY PLUGIN
jquery-throttle-debounce
$(window).scroll($.throttle(250, paralax));
!
$('input').keyup($.debounce(250, autoComplete));
github.com/cowboy/jquery-throttle-debounce

77. UNDERSCORE.JS
$(window).scroll(_.throttle(paralax, 250));
!
$(‘input’).keyup(_.debounce(autoComplete, 250));
underscorejs.org

78. THANK
YOU!
@ALMIRFILHO