검색창 구현 과제를 하는데 검색어를 입력할 때마다 추천 검색어를 보여주는 기능에서, 쓰로틀링과 디바운싱 중에 어떤 걸 적용하는 게 좋을까?
쓰로틀링 : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
디바운싱 : 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
디바운싱
📚 자주 실행되는 작업을 지연, 그룹화하고 마지막 호출만 실행하여 성능을 향상시키는 데 사용되는 기술
📌 비용이 많이 드는 작업의 최종 결과에만 관심이 있는 경우 사용
기본 구현
TypeScript의 가장 기본적인 구현
1. 디바운스할 함수와 delay를 인수로 받는 함수 만들기
2. debounce 함수는 새 함수를 반환함. 실행되면 타이머를 생성해 지연 후 원래 기능을 실행하고 이전 타이머를 취소함
function debounce<Args extends unknown[]>(fn: (...args: Args) => void, delay: number) {
let timeoutID: number | undefined;
const debounced = (...args: Args) => {
clearTimeout(timeoutID);
timeoutID = window.setTimeout(() => fn(...args), delay);
};
return debounced;
}사용법
const expensiveCalculation = debounce(() => {
// 🚩 Do the expensive calculation
}, 1000)
// 👇 Frequently called function
function onChange() {
// 👇 Will run at most once per second
expensiveCalculation()
}Flushing the debounce result
때때로 delay 전에 작업을 실행하고 보류 중인 실행을 취소해야 하는 경우를 플러싱이라고 부름.
보류 중인 작업을 즉시 실행하고 타이머를 지우는, 원래 디바운스 함수 구현에 추가 메서드를 연결할 수 있음
플러시를 지원하는 디바운스 함수
1. 디바운스된 함수를 호출할 때 마지막 작업의 인수를 배열에 저장함
2. 가장 최근에 사용한 인수로 작업을 실행하고 타이머와 캐시된 인수를 지우는 새로운 debounce.flush 새 함수를 만들기
function debounce<Args extends unknown[]>(fn: (...args: Args) => void, delay: number) {
let timeoutID: number | undefined;
let lastArgs: Args | undefined;
const run = () => {
if (lastArgs) {
fn(...lastArgs);
lastArgs = undefined;
}
};
const debounced = (...args: Args) => {
clearTimeout(timeoutID);
lastArgs = args;
timeoutID = window.setTimeout(run, delay);
};
debounced.flush = () => {
clearTimeout(timeoutID);
run();
};
return debounced;
}debounce.flush()를 호출해 즉시 실행
const expensiveCalculation = debounce(() => {
// Expensive calculation...
}, 1000)
function onChange() {
expensiveCalculation()
}
function onClose() {
// 👇 Instantly runs the calculation and cancels any pending calls
expensiveCalculation.flush()
}"매독" 이 포함된 검색 결과를 받고 싶은데 검색할 때마다
ㅁ 매 맫 매 매도 매독 이런식으로 6번이나 api를 호출했다. 불필요한 api 호출이 발생한다. 나는 매독이 다 입력됐을 때 api 요청을 보내고 싶은 것이므로
적당한 타이머를 설정하고, 그 시간 이전에 입력이 발생하면 이전 타이머를 취소하고 새로운 타이머를 다시 설정한다.
쓰로틀링
📚 스로틀링은 실행 속도를 제한하여 자주 실행되는 작업의 성능을 개선하는 데 사용되는 기술입니다. 작업의 정기적인 실행을 보장한다는 점을 제외하면 디바운스와 유사합니다.
📌 자주 실행되는 비용이 많이 드는 작업의 일부 중간 값이 신경쓰일 때 스로틀 기능을 사용하지만 대부분을 버려도 괜찮습니다.
