Throttle and Debounce Patterns in Web Apps

THROTTLE & DEBOUNCE
PATTERNS
IN WEB APPS
@ALMIRFILHO

@loopinfinito
l8p.com.br
@almirfilho

@loopinfinito
l8p.com.br
@almirfilho
after
conf

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
Δ = 100px
≃ 100 *
triggerings!
!%?#$
Responsive modafoca

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

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

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 loop

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

Measuring
damage with
dev tools

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

So, how to control
user events
frequency?

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

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

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

LET’S
THROOOOTLE IT
complexHeavyShit();
};
!
window.addEventListener(‘scroll’,
throttleParalax()
);

!
complexHeavyShit();
};
!
return function(){
}
};
}());
sets
a context

!
complexHeavyShit();
};
!
return function(){
}
};
}());
sets
the func.

!
complexHeavyShit();
};
!
return function(){
}
};
}());
returns the
event handler

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

0s 500ms
t
E
event
executes

0s 500ms
t
E 100ms
timeWindow

0s 500ms
t
E 100ms
E
another event
happens

0s 500ms
t
E 100ms
E
no execution

0s 500ms
t
E 100ms
E E
event
happens

0s 500ms
t
E 100ms
E E
same thing
now

0s 500ms
t
E 100ms
E E 100ms

0s 500ms
t
E 100ms
E E 1E00msE E

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

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

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

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

sets
var timeout;
a context
!
!
return function(){
var context = this;
}, timeWindow);
};
}());

var timeout;
!
!
return function(){
sets
the func.
var context = this;
}, timeWindow);
};
}());

var timeout;
!
!
return function(){
return the
handler
var context = this;
}, timeWindow);
};
}());

0s 500ms
t
E 100ms
setTimeOut

0s 500ms
t
E 100ms
E
clearTimeOut

0s 500ms
t
E 100ms
reset
timeOut
E

0s 500ms
t
E E 10E0ms

0s 500ms
t
E E E 100ms

0s 500ms
t
E E E 100ms
cool to
execute!

0s 500ms
t
E E E 100ms
E
life goes on…

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

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

Throttle and Debounce Patterns in Web Apps

More Related Content

What's hot (20)

Similar to Throttle and Debounce Patterns in Web Apps (20)

More from Almir Filho (7)

Recently uploaded (20)

Throttle and Debounce Patterns in Web Apps