lodash의 _.debounce()
를 사용하지 않고 디바운싱을 구현해보았음
주로 React 프로젝트의 아이디 자동 중복검사, 검색어 입력 등을 구현할 때 사용해봤는데
해당 기능도 React.useTransition
을 사용해서 이런 구조를 직접 만들어 보는 경험이 새로웠음
type F = (...args: number[]) => void
function debounce(fn: F, t: number): F {
// 공통으로 사용될 timeout 선언
let timeout: ReturnType<typeof setTimeout> | null = null;
return function(...args: any[]) {
// 이전 작업이 있다면 timout 제거
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
fn(...args);
}, t);
};
};