41. 타이머

호출 스케줄링

함수 호출을 예약하기 위해 타이머 함수를 사용하는 것

자바스크립트 엔진은 싱글 스레드로 동작하기 때문에

타이머 함수 setTimeout, setInterval 은 비동기 처리 방식으로 동작함

---

타이머 함수

setTimeout / clearTimeout

• 두 번째 인수로 전달받은 시간(ms, 1/1000ch)으로 단 한 번 동작하는 타이머 생성
• 이후 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수가 호출됨
• setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id 를 반환함
• clearTimout 함수의 인수로 해당 타이머 id를 전달하여 타이머 취소 가능 (호출 스케줄링 취소)

 

const timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);

func

• 타이머가 만료된 뒤 호출될 콜백 함수

 

delay

• 타이머 만료 시간
• setTimeout 함수를 delay 시간으로 단 한 번 동작하는 타이머를 생성함
• 인수 전달을 생략한 경우 기본값 0이 지정됨

 

param

• 호출 스케줄링된 콜백 함수에 전달해야 할 인수가 존재하는 경우 세 번째 이후의 인수로 전달 가능

 

setInterval / clearInterval

• 두 번째 인수로 전달받은 시간으로 반복 동작하는 타이머 생성
• 이후 타이머가 만료될 때마다 첫 번째 인수로 전달받은 콜백 함수가 반복 호출됨
• setInterval 함수에 전달할 인수는 setTimeout 함수와 동일함
• setInterval 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id 를 반환함
• clearInterval 함수의 인수로 해당 타이머 id를 전달하여 타이머 취소 가능 (호출 스케줄링 취소)

---

디바운스와 스로틀

• 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서
  과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법
• 구현에는 타이머 함수가 사용됨

 

디바운스

• 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가
  일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 함
• resize 이벤트 처리, 자동완성 UI 구현, 버튼 중복 클릭 방지 처리 등에 사용됨
• 실무에서는 Lodash 의 debounce 함수 사용을 권장함

 

스로틀

• 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도
  일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 함
• scroll 이벤트 처리, 무한 스크롤 UI 구현 등에 사용됨
• 실무에서는 Lodash 의 throttle 함수 사용을 권장함