41. 타이머

(800~806)

요약

타이머 함수

• 호출 스케줄링: 함수 실행을 예약하는 것
• 타이머 함수 (setTimeout, setInterval)은 호스트 객체*이다.
  • *EMCAScript 사양에 정의되지 않았으나, 브라우저와 Node환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공함
• 자바스크립트 엔진은 싱글 스레드로 동작하므로, 타이머함수는 비동기 처리방식으로 동작한다.
• params: (콜백 함수, delay, 콜백 함수 인자1, 콜백 함수 인자2, …)
• setTimeout, setInterval 모두 delay 시간이 설정된 타이머가 만료됐을 때, 전달한 콜백함수가 즉시 호출되는 것을 보장하지 않음
  • delay 시간은 태스크 큐에 콜백 함수를 등록하는 시간을 지연
  • delay 시간이 4ms이하인 경우 최소 지연 시간인 4ms가 지정
• setTimeout, setInterval 함수 모두 id를 반환하며, 반환한 id를 인자로 받는 clearTimeout, clearInterval 함수로 호출 스케줄링을 취소

디바운스와 스로틀

• 짧은 시간 간격으로 연속으로 발생하는 이벤트의 경우, 이벤트 핸들러가 과도하게 호출되어 성능 저하 ⇒ 이런 이벤트들을 그룹화해서 과도하게 호출되는 것을 방지 : 디바운스와 스로틀
• 디바운스: 그룹화한 뒤 마지막에 한 번만 이벤트 핸들러 호출
  • 전달한 delay보다 짧은 간격으로 이벤트가 발생하면 이전 타이머를 취소하고 새로 타이머를 설정
• 스로틀: 그룹화한 뒤 일정 시간 단위로 이벤트 핸들러 호출되도록 호출 주기를 만든다
  • delay가 지나기 전에 이벤트가 발생하면 아무것도 하지않다가, 지난 뒤에 이벤트가 발생하면 새로운 타이머를 재설정한다 ⇒ delay 간격으로 콜백 호출
    

느낀 점

• 디바운스와 스로틀 중 선택해서 사용하면 좋은 상황의 예시가 있을까
  • 디바운스
    • 입력 input에 Ajax요청이 붙어있을 경우 (입력 필드 자동완성)
    • resize
    • 버튼 중복 클릭 방지 처리
  • 스로틀
    • 스크롤 이벤트 처리, 무한 스크롤
• rAF는 왜 여기 없지?
• 예시의 디바운스/스로틀 함수는 완벽하지 않다고 하는데, lodash의 디바운스/스로틀 함수와 어떻게 다를까
  • 디바운스/스로틀 함수 예시

    const debounce = (callback, delay) => {
                let timerId;
                return (...args) => {
                    if (timerId) clearTimeout(timerId);
                    timerId = setTimeout(callback, delay, ...args);
                }
      }
    
    const throttle = (callback, delay) => {
        let timerId;
        return (...args) => {
            if (timerId) return;
            timerId = setTimeout(()=>{
                callback(...args);
                timerId = null;
            }, delay);
        };
    };

구현 아이디어

• 리액트 타이머 훅 함수에 적용
• 타이머 함수 만들어보기
• 타이머함수로 디바운스와 스로틀 구현하기