1. 타이머
1.1 setTimeout, clearTimeout
-
역할
지정한 시간(ms)이 지난 후 한 번만 콜백 함수를 실행
-
특징
- 한번만 실행됨
- 타이머 ID를 반환
clearTimeout(id)로 실행 취소 가능
const timerId = setTimeout(() => {
console.log("3초 후 실행");
}, 3000);
// 실행 취소
clearTimeout(timerId);
⚒️ 사용 예
- 알림 표시
- 지연 로딩
- 일정 시간 후 UI 변경
1.2 setInterval, clearInterval
-
역할
지정한 시간(ms) 마다 반복적으로 콜백 실행
-
특징
- 명시적으로 중단하지 않으면 계속 실행
- 타이머 Id로 중단 가능
const intervalId = setInterval(() => {
console.log("1초마다 실행");
}, 1000);
// 반복 중단
clearInterval(intervalId);
⚒️ 사용 예
- 시계
- 실시간 데이터 풀링
- 애니메이션 간격처리
2. 이벤트 제어 기법: Debounce & Throttle
이벤트가 연속 발생하면 실행을 미루다가, 마지막 이벤트 이후 일정 시간 동안 추가 이벤트가 없을 때 한 번만 실행
2.1 디바운스 (Debounce)
“멈춘 뒤에 한 번 실행”
function debounce(fn, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, arguments), delay);
};
}
/*
Q. let은 왜 클로저로 사용되는 가?
A. debounce()는 한 번만 실행
그때 timer도 한 번만 생성
반환된 함수가 여러 번 호출되어도
→ 같은 timer 변수를 계속 사용
*/
⚒️ 사용 예
- 검색어 자동 완성
- 입력 검증
- 창 크기 조정 후 레이아웃 계산
2.2 스로틀 (Throttle)
“주기적으로 실행”
function throttle(fn, interval) {
let lastTime = 0;
return function () {
const now = Date.now();
if (now - lastTime >= interval) {
lastTime = now;
fn.apply(this, arguments);
}
};
}
⚒️ 사용 예
- 스크롤 위치 계산
- 무한 스크롤
- 마우스 이동 추적