Throttle 와 Debounce 개념 정리하기

간단 예제

// html
<input id="search" type="search" name="search" value="" />
var debounce = null;
var throttle = null;
function keyUpFn(el) {
// normal
console.log('normal', el.target.value, new Date().getTime());
// debounce
clearTimeout(debounce);
debounce = setTimeout(() => {
console.log(
'debounce',
el.target.value, new Date().getTime());
}, 500);
// throttle
if(!throttle) {
setTimeout(() => {
console.log('throttle', throttle, new Date().getTime());
throttle = null;
}, 500);
}
throttle = el.target.value;
}
document.getElementById("search").addEventListener('keyup', keyUpFn);// normal h 1583658583270
// normal he 1583658583582
// normal hel 1583658583878
// normal hell 1583658584182
// throttle hell 1583658584271
// 입력이 끝남
// normal hello 1583658584534
// debounce hello 1583658585036
// throttle hello 1583658585536
  1. Input Search ElementKeyup Event Listener 를 등록한다.
  2. normal 에서는, 키보드입력 발생하면, 그 즉시 value 를 출력한다.
  3. throttle 에서는 키보드입력 발생하면, 500ms 후에, 가장 최신 value 를 출력하고, 초기화 하여, 키보드 입력이 끝날때까지 반복한다.
  4. debounce 에서는 키보드 입력이 발생하면, 500ms 동안 기다리다, 그 안에 키보드 입력이 발생하면, 시간을 초기화 하고 다시 기다리다, 가장 최신 value 를 출력한다.

Throttle

Debounce

Throttle 와 Debounce 차이점

throttle-debounce

throttle-debounce 에서 throttle

document.getElementById(“search”)
.addEventListener(‘keyup’,
throttle(300,(e) => {
console.log(e.target.value);
})

);
function exec () {
lastExec = Date.now();
callback.apply(self, args);
}
timeoutID = setTimeout(
debounceMode ? clear : exec,
debounceMode === undefined ?
delay — elapsed :
delay
);

throttle-debounce 에서 decounce

document.getElementById("search")
.addEventListener('keyup',
debounce(300, (e) => {
console.log(e.target.value);
})

);`
function ( delay, atBegin, callback ) {
return callback === undefined ?
throttle(delay, atBegin, false) :
throttle(delay, callback, atBegin !== false);
}

lodash

lodash 에서 decounce

import _ from ‘lodash’;document
.getElementById(“search”)
.addEventListener(‘keyup’,
_.debounce((e) => {
console.log(e.target.value);
}, 300)

);
function shouldInvoke(time) {
const timeSinceLastCall = time — lastCallTime
const timeSinceLastInvoke = time — lastInvokeTime
return (
lastCallTime === undefined ||
(timeSinceLastCall >= wait) ||
(timeSinceLastCall < 0) ||
(maxing && timeSinceLastInvoke >= maxWait)
)
}
function leadingEdge(time) {
lastInvokeTime = time
timerId = startTimer(timerExpired, wait)
return leading ? invokeFunc(time) : result
}
function timerExpired() {
const time = Date.now()
if (shouldInvoke(time)) {
return trailingEdge(time)
}
timerId = startTimer(timerExpired, remainingWait(time))
}
function trailingEdge(time) {
timerId = undefined
if (trailing && lastArgs) {
return invokeFunc(time)
}
lastArgs = lastThis = undefined
return result
}

lodash 에서 throttle

import _ from ‘lodash’;document
.getElementById(“search”)
.addEventListener(‘keyup’,
_.throttle((e) => {
console.log(e.target.value);
}, 300)

);
function throttle(func, wait, options) {
let leading = true
let trailing = true
return debounce(func, wait, {
leading,
trailing,
'maxWait': wait
})
}
function remainingWait(time) {
const timeSinceLastCall = time — lastCallTime
const timeSinceLastInvoke = time — lastInvokeTime
const timeWaiting = wait — timeSinceLastCall
return maxing
? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
: timeWaiting
}

RxJS

RxJS 에서 decounce

import { fromEvent, interval } from ‘rxjs’;
import { debounce, debounceTime } from ‘rxjs/operators’;
fromEvent(
document.getElementById("search"),
'keyup'
).pipe(
debounceTime(300)
// debounce(ev => interval(300))
).subscribe(e => console.log(e.target.value));

RxJS 에서 throttle

import { fromEvent, interval } from ‘rxjs’;
import { throttle, throttleTime } from ‘rxjs/operators’;
fromEvent(
document.getElementById("search"),
'keyup'
).pipe(
throttleTime(300)
// throttle(ev => interval(300))
).subscribe(e => console.log(e.target.value));

참고자료

--

--

--

Javascript is great We may not be great

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
박성룡 ( Andrew park )

박성룡 ( Andrew park )

Javascript is great We may not be great

More from Medium

PRESENT MOMENTS:

HippoInu is not just a meme token.

Why you Should be a Communist…

Minds of winners (2/5)