Timer

호출 스케줄링

• 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 후 함수가 호출되도록 함수 호출을 예약하는 것을 호출 스케줄링이라고 합니다.

• 자바스크립트는 타이머를 생성할 수 있는 타이머 함수인 setTimeout, setInterval 그리고 타이머를 제거할 수 있는 clearTimeout, clearInterval 함수를 제공합니다. 타이머 함수는 브라우저와 Node.js 환경에서 제공되는 호스트 객체로 전역 객체의 메서드로 제공됩니다.

• setTimeout 함수는 일정 시간이 경과된 후 인수로 전달한 콜백 함수를 단 한 번만 호출하고, setInterval 함수는 일정 시간이 경과될 때마다 인수로 전달한 콜백 함수가 반복 호출됩니다.

타이머 함수

setTimeout / clearTimeout

setTimetout 함수는 두 번째 인수로 전달한 시간(밀리초, ms단위)가 경과되면 첫 번째 인수로 전달한 콜백 함수를 태스크 큐에 푸시합니다. 세 번째 인수 이후에 전달한 값은 콜백 함수의 인수로 전달됩니다

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

• 첫 번째 인수로 콜백함수 대신 코드 문자열을 전달할 수도 있습니다. 코드 문자열을 전달하는 경우 타이머가 만료된 이후에 해석되고 실행되므로 권장하지 않습니다.

• 주의할 점은 두 번째 인수로 전달한 시간이 4ms 이하인 경우 최소 지연 시간인 4ms로 설정됩니다. 생략시 기본값은 0이 설정됩니다.

• setTimeout 함수를 호출하면 타이머를 식별할 수 있는 타이머 ID를 반환합니다. 브라우저 환경에서는 숫자 타입이고, Node.js 환경에서는 객체 타입입니다. 이 타이머 ID는 clearTimeout 함수의 인수로 전달하면 타이머를 제거합니다. 즉, clearTimeout 함수는 호출 스케줄링을 취소합니다.

setInterval / clearTimetout

• setInterval 함수는 두 번째 인수로 전달받은 시간(밀리초, ms단위)으로 첫 번째 인수로 전달한 콜백 함수를 반복 호출합니다. 세 번째 이후 전달한 값은 콜백 함수의 인수로 전달됩니다.

setInterval(func | code, delay [, param1, param2, ...]);

• setInterval 함수도 타이머를 식별할 수 있는 고유한 타이머 ID를 반환합니다. 이 타이머 ID를 clearInterval 함수의 인수로 전달하면 타이머를 삭제, 즉 호출 스케줄링을 취소합니다.

디바운스와 스로틀

• scroll, resize, input, mousemove 와 같은 이벤트들은 짧은 시간동안 연속해서 발생합니다. 이는 과도한 이벤트 핸들러 호출로 인해 성능에 문제를 일으킬 수 있습니다.
• 디바운스와 스로틀은 과도하게 발생하는 이벤트들을 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법입니다.

디바운스 (debounce)

• 디바운스는 짧은 시간동안 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간동안 이벤트가 발생하지 않을 때 이벤트 핸들러를 호출합니다.
• 즉, 디바운스는 짧은 시간동안 연속해서 발생하는 이벤트들을 그룹화해서 이벤트 핸들러를 단 한 번만 호출하도록 합니다.
• 디바운스는 지정한 시간보다 짧은 간격으로 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정합니다.

function debounce(callback, delay) {
    let timerId;
    return event => {
    	if (timerId) clearTimeout(timerId);
        timerId = setTimeout(callback, delay, event);
    };
}

• 이처럼 짧은 시간 간격으로 이벤트가 연속해서 발생하는 경우 이벤트 핸들러를 호출하지 않다가 일정 시간 동안 이벤트가 더 이상 발생하지 않으면 이벤트 핸들러가 한 번만 호출되도록 하는 디바운스는 resize 이벤트 처리, input 요소에 입력된 값으로 Ajax 요청하는 입력 필드 자동완성 UI 구현, 버튼 중박 클릭 방지 처리 등에 유용하게 사용됩니다

스로틀 (throttle)

• 스로틀은 짧은 시간 간격 동안 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 호출되도록 합니다.
• 즉, 짧은 시간 동안 연속적으로 발생하는 이벤트를 그룹화하여 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만듭니다.

function throttle(callback, delay) {
    let timerId;
    return event => {
    	if (timerId) return;
        timerId = setTimeout(event => {
            callback(event);
            timerId = null;
        },delay,event);
    };
}

• 이처럼 짧은 시간동안 연속적으로 이벤트가 발생하면 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만듭니다.
  스로틀은 scroll 이벤트 처리, 무한 스크롤 UI 구현 등에서 유용하게 사용됩니다