제로베이스 네카라쿠배 온라인스쿨 1기 과정(2021. 11 ~ 2021. 12)에서 공부했던 Javascript Deepdive 교재의 내용 요약 및 필자의 생각을 정리한 내용입니다. 원서의 내용 챕터의 일부를 요약한 내용으로 보다 자세한 내용은 원서를 참조 바랍니다.
41장 타이머
41.1 호출 스케줄링
- 함수를 명시적으로 호출하면 함수가 즉시 실행된다.
- 만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 **호출 스케줄링(scheduling a call)**이라 한다.
- 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout, setInterval, 타이머를 제거할 수 있는 clearTimeout, clearInterval을 제공한다.
- 타이머함수는 호스트 객체로 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. (ECMAScript 사양에는 없다)
- 타이머 함수 setTimeout과 setInterval이 생성한 타이머가 만료되면 콜백 함수가 호출된다.
- setTimeout은 단 한 번 동작하고, setInterval은 반복 동작한다(타이머가 만료될때마다 콜백 함수가 반복 호출된다)
- 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다.(
싱글 스레드)- 따라서 타이머 함수
setTimeout과 setInterval은 비동기 처리 방식으로 동작한다.
- 따라서 타이머 함수
41.2 타이머 함수
41.2.1 setTimeout/clearTimeout
- setTimeout 함수는 두 번째 인수로 전달받은 시간으로 단 한번 동작하는 타이머를 생성한다.
- 이후 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수가 호출된다.
| 매개변수 | 설명 |
|---|---|
| func | 타이머가 만료된 뒤 호출된 콜백함수 |
| ※ 콜백 함수 대신 코드를 문자열로 전달할 수 있다. 이때 코드 문자열은 타이머가 만료된 뒤 해석되고 실행된다.(eval 함수와 유사) | |
| delay | 타이머 만료 시간(밀리초 단위). setTimeout 함수는 delay 시간으로 단 한번 동작하는 타이머를 생성한다. 생략 시 기본값이 0이된다. |
| ※ delay 시간이 설정된 타이머가 만료되면 콜백 함수가 즉시 호출되는 것이 보장되지는 않는다. delay 시간은 테스크 큐에 콜백 함수를 등록하는 시간을 지연할 뿐이다. | |
| ※ delay가 4ms 이하인 경우 최소 지연 시간 4ms가 지정된다. | |
| param1, param2 … | 호출 스케줄링된 콜백 함수에 전달해야 할 인수가 존재하는 경우 세 번째 이후의 인수로 전달할 수 있다. |
| ※ IE9 이하에서는 불가능 |
- setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
- 타이머 id는 브라우저 환경인 경우 숫자며, Node.js 환경인 경우 객체다.
- 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소할 수 있다.
41.2.2 setInterval / clearInterval
- 전달할 인수는 setTimeout과 동일하며, 타이머가 만료될때 마다 첫 번째 인수로 전달받은 콜백 함수가 반복 호출된다. (타이머가 취소될 때까지 계속)
- 고유한 타이머 id도 setTimeout과 동일 내용
41.3 디바운스와 스로틀
- scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.
- 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.
41.3.1 디바운스
- 디바운스(debounce)는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러가 호출하지 않다가 일정시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다.
- 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다.
<!DOCTYPE html>
<html>
<body>
<input type="text" />
<div class="msg"></div>
<script>
const $input = document.querySelector('input');
const $msg = document.querySelector('.msg');
const debounce = (callback, delay) => {
let timerId;
// debounce 함수는 timerId를 기억하는 클로저를 반환한다.
return event => {
// delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다.
// 따라서 delay보다 짧은 간격으로 이벤트가 밠애하면 callback은 호출되지 않는다.
if (timerId) clearTimeout(timerId);
timerId = setTimeout(callback, delay, event);
};
};
// debounce 함수가 반환하는 클로저가 이벤트 핸들러로 등록된다.
// 300ms 보다 짧은 간격으로 input 이벤트가 발생하면 debounce 함수의 콜백 함수는
// 호출되지 않다가 300ms 동안 input 이벤트가 더 이상 발생하지 않으면 한 번만 호출된다.
$input.oninput = debounce(e => {
$msg.textContent = e.target.value;
}, 300);
</script>
</body>
</html>- input 이벤트는 사용자가 텍스트 입력 필드에 값을 입력할 때마다 연속해서 발생한다.
- 만약 사용자 입력 필드에 입력한 값으로 Ajax 요청같은 무거운 처리를 수행하면 사용자가 입력을 완료하지 않아도 Ajax 요청이 전송될 것이기 때문에 서버에 부담을 주는 불필요한 처리이므로, 입력을 완료했을 때 한 번만 Ajax 요청을 전송하는 것이 바람직하다.
- 사용자가 입력을 완료했는지 여부는 정확히 알 수 없으므로 일정 시간 동안 텍스트 입력 필드에 값을 입력하지 않으면 입력이 완료된 것으로 간주한다.
- debounce 함수가 반환한 함수는 debounce 함수에 두번째 인수로 전달한 시간(delay)보다 짧은 간격으로 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다.
- 이처럼 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간 동안 이벤트가 더 이상 발생하지 않음녀 이벤트 핸들러가 한 번만 호출되도록 하는 것이 디바운스다.
- resize 이벤트, input 요소에 입력된 값으로 ajax 요청을 하는 입력 필드 자동완성 UI 구현, 버튼 중복 클릭 방지 처리 등에 유용하게 사용된다.
- 실무에서는 Underscore의 debounce 함수나 Loadsh의 debounce 함수를 사용하는 것을 권장한다.
41.3.2 스로틀
- 스로틀은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.
- 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.
- throttle 함수가 반환한 함수는 throttle 함수에 두 번째 인수로 전달한 시간이 경과하기 이전에 이벤트가 발생하면 아무것도 하지 않다가 delay 시간이 경과했을 때 이벤트가 발생하면 콜백 함수를 호출하고 새로운 타이머를 재설정한다.
- 실무에서는 Underscore의 throttle 함수나 Loadsh의 throttle 함수를 사용하는 것을 권장한다.