Tweet
Tweet

Slide 1

Slide 1 text

PATTERNS IN WEB APPS THROTTLE & DEBOUNCE @ALMIRFILHO

Slide 2

Slide 2 text

@almirfilho @loopinfinito l8p.com.br

Slide 3

Slide 3 text

@almirfilho @loopinfinito l8p.com.br

Slide 4

Slide 4 text

@almirfilho @loopinfinito l8p.com.br after conf

Slide 5

Slide 5 text

THE PROBLEM

Slide 6

Slide 6 text

How to control user events frequency?

Slide 7

Slide 7 text

onclick onresize onscroll onmousemove SOME CASES

Slide 8

Slide 8 text

onclick Order some shit Some AJAX action. Whatever …

Slide 9

Slide 9 text

onclick Order some shit Some AJAX action. Whatever click freak

Slide 10

Slide 10 text

onresize Responsive modafoca

Slide 11

Slide 11 text

onresize ∆ = 100px triggerings! !%?#$ ≃ 100 * Responsive modafoca

Slide 12

Slide 12 text

onscroll Paralax bullshit

Slide 13

Slide 13 text

onscroll ∆ = 100px … same fuc*ing thing ≃ Paralax bullshit

Slide 14

Slide 14 text

onmousemove Gaming junk

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

**BONUS** PROBLEM

Slide 17

Slide 17 text

Updating drawings?

Slide 18

Slide 18 text

just redraw E-V-E-R-Y-T-H-I-N-G Updating drawings?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Measuring damage with dev tools

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

So, how to control user events frequency?

Slide 25

Slide 25 text

THROTTLE

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ENGINE THROTTLE

Slide 28

Slide 28 text

So, throttle is just a valve? ! yeeep

Slide 29

Slide 29 text

resizing scrolling mouse moving COMMON CASES

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

var paralax = function(args){ complexHeavyShit(); }; ! window.addEventListener(‘scroll’, throttleParalax() ); LET’S THROOOOTLE IT

Slide 35

Slide 35 text

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); } }; }());

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Let’s visualize it

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

DEBOUNCE

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

ELECTRONIC DEBOUNCING

Slide 52

Slide 52 text

Debounce cancels multiple actions for postpone to the last one.

Slide 53

Slide 53 text

clicking key pressing COMMON CASES

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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); }; }());

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Let’s visualize it

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

READ ABOUT [PT-BR]

Slide 75

Slide 75 text

but…

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

THANK YOU! @ALMIRFILHO