Throttle & Debounce Patterns in Web Apps

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

1. PATTERNS IN WEB APPS THROTTLE & DEBOUNCE @ALMIRFILHO
2. @almirfilho @loopinfinito l8p.com.br
3. @almirfilho @loopinfinito l8p.com.br
4. @almirfilho @loopinfinito l8p.com.br after conf
5. THE PROBLEM
6. How to control user events frequency?
7. onclick onresize onscroll onmousemove SOME CASES
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 triggerings! !%?#$ ≃ 100 * 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 trigg… OMG plz stop ≃ 150 * Gaming junk
16. **BONUS** PROBLEM
17. Updating <canvas> drawings?
18. just redraw E-V-E-R-Y-T-H-I-N-G Updating <canvas> drawings?
19. stage.update = function(){ redrawHeavyShit(); }; ! while(game.isOn){ game.step(); stage.update(); } stupid game loop
20. stage.update = function(){ redrawHeavyShit(); }; ! var gameLoop = function(){ game.step(); stage.update(); requestAnimationFrame(gameLoop); }; ! gameLoop(); WAY COOLER
21. stage.update = function(){ redrawHeavyShit(); }; ! var gameLoop = function(){ game.step(); stage.update(); requestAnimationFrame(gameLoop); }; ! gameLoop(); WAY COOLER
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. resizing scrolling mouse moving COMMON CASES
30. t E E E E E E E E E E E onscroll paralax() 0.1s 0s
31. t E E E E E E E E E E E onscroll throttled paralax() 0.1s 0s THROTTLE
32. t E E E E E E E E E E E onscroll throttled paralax() 0.1s 0s THROTTLE
33. var paralax = function(args){ complexHeavyShit(); }; ! window.addEventListener(‘scroll’, function(e){ paralax(e.args); });
34. var paralax = function(args){ complexHeavyShit(); }; ! window.addEventListener(‘scroll’, throttleParalax() ); LET’S THROOOOTLE IT
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. t E 500ms 0s event happens Let’s visualize it
41. t 500ms 0s E Let’s visualize it event executes
42. t 500ms 0s 100ms E timeWindow Let’s visualize it
43. t 500ms 0s 100ms E Let’s visualize it another event happens E
44. t 500ms 0s 100ms E Let’s visualize it no execution E
45. t 500ms 0s 100ms E Let’s visualize it event happens E E
46. t 500ms 0s 100ms E Let’s visualize it same thing now E E
47. t 500ms 0s 100ms E Let’s visualize it E 100ms E
48. t 500ms 0s 100ms E Let’s visualize it E 100ms E E E 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. clicking key pressing COMMON CASES
54. t E E E E E E E E E onkeyup autoComplete() 1s 0s
55. t E E E E E E E E E onkeyup debouncing 1s 0s DEBOUNCE autoComplete()
56. t E E E E E E E E E onkeyup debouncing 1s 0s DEBOUNCE autoComplete()
57. btn.addEventListener(‘keyup’, function(){ autoComplete(); });
58. btn.addEventListener(‘keyup’, debounceAutoComplete() ); LET’S DEBOOOUNCE IT
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; 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
61. 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.
62. 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
63. Let’s visualize it
64. t E 500ms 0s event happens Let’s visualize it
65. t 500ms 0s 100ms E setTimeOut Let’s visualize it
66. t 500ms 0s 100ms E another event happens E Let’s visualize it
67. t 500ms 0s 100ms E clearTimeOut E Let’s visualize it
68. t 500ms 0s 100ms E reset timeOut E Let’s visualize it
69. t 500ms 0s 100ms E E E Let’s visualize it
70. t 500ms 0s 100ms E E E Let’s visualize it
71. t 500ms 0s 100ms E E E Let’s visualize it
72. t 500ms 0s 100ms E E E cool to execute! Let’s visualize it
73. t 500ms 0s 100ms E E E life goes on… E Let’s visualize it
74. READ ABOUT [PT-BR]
75. but… <x-mimimi>
76. $(window).scroll($.throttle(250, paralax)); ! $('input').keyup($.debounce(250, autoComplete)); JQUERY PLUGIN jquery-throttle-debounce github.com/cowboy/jquery-throttle-debounce
77. UNDERSCORE.JS underscorejs.org $(window).scroll(_.throttle(paralax, 250)); ! $(‘input’).keyup(_.debounce(autoComplete, 250));
78. THANK YOU! @ALMIRFILHO