DOM Event 기반으로 실행되는 자바스크립트를 성능상의 이유 및 효율적으로 Event를 제어하는 프로그래밍 기법
<input id="input" />
...
<script>
var timer;
document.querySelector("#input").addEventListener("input", function (e) {
console.log(`요청: ${e.target.value}`);
});
</script>
디바운싱과 쓰로틀링을 사용하지 않았을 경우
위와 같은 낭비가 발생하게 됨
예를 들어 유료 API를 사용하는 경우, 11번의 쿼리를 낭비하는 셈
🟢 디바운싱(Debouncing): 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
❓ 사용 예시: 검색어 자동완성, 브라우저 리사이징 등
<script>
var timer;
document.querySelector("#input").addEventListener("input", function (e) {
//500ms 동안 입력이 없으면 입력이 끝난 것으로 간주
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
console.log(`요청: ${e.target.value}`);
}, 500);
});
</script>
🟢 쓰로틀링(Throttling): 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
❓ 사용 예시: 자동완성 및 스크롤 이벤트 등
<script>
var timer;
document.querySelector("#input").addEventListener("input", function (e) {
if (!timer) {
timer = setTimeout(function () {
timer = null;
console.log(`요청: ${e.target.value}`);
}, 500);
}
});
</script>
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa