디바운싱은 주로 ajax 검색에 자주 쓰입니다.
쓰로틀링은 스크롤을 올리거나 내릴 때 보통 사용합니다.
디바운싱 (debouncing)
- 연이어 호출되는 함수들 중 마지막 함수(또는 제일 첫번째)만 호출되도록 하는 것.
<template>
<div>
<input
:value="inputText"
@input="
(e) => {
inputText = e.target.value;
changeHandler();
debounceFunc(e.target.value);
}
"
/>
</div>
</template>
<script setup lang="ts">
import { Ref, ref, watch } from "vue";
import _, { debounce } from "underscore";
const inputText: Ref<string> = ref<string>("");
const changeHandler = () => {
console.log("일반 : " + inputText.value);
};
const debounceFunc = _.debounce((text: string) => {
console.log("디바운스 : " + text);
}, 500);
</script>
<style scoped></style>코드 실행 예시.
- 상단의 예시들과 같이, input 태그의 onChange 형식과 같은 상황을 체크하고 특정 api를 실행하거나 함수를 실행하도록할때, 과도하게 많은 API 가 호출되는 것을 막기위해 사용한다.
- 디바운스를 사용하면, 상단의 코드 예시와 같이, 마지막 입력이 끝난후에 500ms 가 지난후에 디바운스 내에 정의된 함수가 실행된다.
쓰로틀링 (throttling)
- 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
코드 실행 예시.
- 해당 gif 파일로 쓰로틀링과 디바운싱의 차이를 명확하게 알 수 있다.
- 쓰로틀링의 경우 이벤트가 계속적으로 호출되어도, 이전에 호출되었던 시간으로부터 특정시간이 흐른 후에는 또 다시 해당 이벤트를 호출 할 수 있다.
- 예시를 보면, 쓰로틀링의 경우 규칙적으로 log 를 찍지만, 디바운싱의 경우 맨 마지막에 한번만 찍게된다.
참고
Step by step