throttle

스로틀. 함수가 잇달아 불릴 때, 정해진 간격마다 많아야 한 번만 실행합니다. 첫 호출은 바로 돌고(앞쪽), 그 구간의 마지막 호출은 구간이 닫힐 때 다시 돕니다(뒤쪽). 그래서 마지막 상태가 버려지는 일이 없습니다.

스크롤, 포인터 이동, 드래그처럼 끊이지 않는 반응이 필요한 곳에 쓰세요. "마지막 값만 중요하다"면(입력하면서 하는 검색, 자동 저장) debounce를 쓰세요.

API

throttle(fn, delay?)

매개변수

매개변수	설명	타입	기본값
`fn`	스로틀할 함수	`Function`	필수
`delay`	최소 간격(ms)	`number`	`300`

반환값

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

멤버	설명	타입
`cancel()`	대기 중인 뒤쪽 호출을 버립니다	`() => void`
`pending()`	뒤쪽 호출이 대기 중인지	`() => boolean`

예시

import { throttle } from 'ranuts';

const onScroll = throttle(() => update(window.scrollY), 100);
window.addEventListener('scroll', onScroll);

// 정리할 때는 리스너를 떼는 것 *뿐 아니라* 대기 중인 뒤쪽 호출도 버립니다
window.removeEventListener('scroll', onScroll);
onScroll.cancel();

참고

앞쪽과 뒤쪽: 곧바로 한 번 돌고, 구간이 끝날 때 가장 최근 인자로 한 번 더 돕니다.
this와 인자는 호출한 쪽에서 그대로 넘어옵니다.
어디서든 돕니다: 맨 setTimeout만 쓰므로 Node, 웹 워커, SSR에서도 동작합니다.
throttle()을 부를 때마다 구간은 따로입니다. 스로틀된 두 함수가 서로를 막는 일은 없습니다.
정리할 때는 반드시 cancel()을 부르세요. 그러지 않으면 뒤쪽 호출이 이미 사라진 문맥으로 발화합니다.