Throttle & Debounce Patterns in Web Apps

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