debounce

디바운스. 함수가 잇달아 불릴 때, 호출이 ms 밀리초 동안 멎은 뒤에야 실행합니다. 마지막 상태만 중요한 곳, 이를테면 입력하면서 하는 검색, 창 크기 조절, 자동 저장에 알맞습니다.

"중간 값도 필요하다"면 throttle을 쓰세요.

API

debounce(fn, ms?)

매개변수

매개변수	설명	타입	기본값
`fn`	디바운스할 함수	`Function`	필수
`ms`	잠잠해질 때까지의 시간(ms)	`number`	`500`

반환값

호출한 쪽의 this와 마지막 인자를 지키는 디바운스된 함수이며, 여기에 다음이 더해집니다.

멤버	설명	타입
`cancel()`	대기 중인 호출을 버립니다	`() => void`
`flush()`	대기 중인 호출을 지금 실행합니다(예: 제출 직전)	`() => void`
`pending()`	대기 중인 호출이 있는지	`() => boolean`

예시

import { debounce } from 'ranuts';

const save = debounce((draft) => api.save(draft), 800);
input.addEventListener('input', (e) => save(e.target.value));

form.addEventListener('submit', () => save.flush()); // 마지막 타이핑을 잃지 않도록
onUnmount(() => save.cancel());

참고

실행되는 것은 마지막 호출뿐이며, 인자도 그 마지막 호출의 것을 씁니다.
this는 호출한 쪽에서 가져옵니다: obj.handler()는 obj를 봅니다.
정리할 때는 반드시 cancel()을 부르세요. 그러지 않으면 대기 중인 타이머가 이미 사라진 문맥으로 발화합니다.
타입이 온전히 붙습니다: 인자와 반환값의 타입은 fn에서 추론됩니다.

debounce ​

API ​

debounce(fn, ms?) ​

매개변수 ​

반환값 ​

예시 ​

참고 ​

debounce

API

debounce(fn, ms?)

매개변수

반환값

예시

참고