throttle
스로틀. 함수가 잇달아 불릴 때, 정해진 간격마다 많아야 한 번만 실행합니다. 첫 호출은 바로 돌고(앞쪽), 그 구간의 마지막 호출은 구간이 닫힐 때 다시 돕니다(뒤쪽). 그래서 마지막 상태가 버려지는 일이 없습니다.
스크롤, 포인터 이동, 드래그처럼 끊이지 않는 반응이 필요한 곳에 쓰세요. "마지막 값만 중요하다"면(입력하면서 하는 검색, 자동 저장) debounce를 쓰세요.
API
throttle(fn, delay?)
매개변수
| 매개변수 | 설명 | 타입 | 기본값 |
|---|---|---|---|
fn | 스로틀할 함수 | Function | 필수 |
delay | 최소 간격(ms) | number | 300 |
반환값
호출한 쪽의 this와 인자를 지키는 스로틀된 함수이며, 여기에 다음이 더해집니다.
| 멤버 | 설명 | 타입 |
|---|---|---|
cancel() | 대기 중인 뒤쪽 호출을 버립니다 | () => void |
pending() | 뒤쪽 호출이 대기 중인지 | () => boolean |
예시
js
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()을 부르세요. 그러지 않으면 뒤쪽 호출이 이미 사라진 문맥으로 발화합니다.
0.3에서 없앴습니다
generateThrottle()은 사라졌습니다. 그것이 돌려주던 팩터리가 만든 함수들은 타이머와 타임스탬프를 하나씩 함께 썼기 때문에, 상관없는 두 스로틀 함수가 서로를 눌러 버렸습니다. const g = generateThrottle(); const f = g(fn, delay)는 throttle(fn, delay)로 바꾸세요.