[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fbyjuun.com%2Fposts%2FJavaScript%2Fdeep-dive-js-41&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

# 🌟 호출 스케줄링 일정 시간이 지난 후 함수를 호출하도록 예약을 하려면 타이머 함수를 사용해야 한다. 이를 호출 스케줄링 이라고 한다. 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 `setTimeout` 과 `setInterval`, 타이머를 제거할 수 있는 타이머 함수 `clearTimeout` 과 **clearInterval** 을 제공한다. `setTimeout` 과 `setInterval` 은 생성한 타이머가 만료되면 콜백 함수가 호출된다. `setTimeout` 함수의 콜백은 타이머가 만료되면 **단 한번 호출**되고, `setInterval` 함수의 콜백 함수는 타이머가 만료될 때마다 **반복 호출**된다. 그렇지만, 둘 다 비동기 함수이다.
# 🌟 타이머 함수 ## ✨ setTimeout / clearTimeout setTimeout 함수는 두 번째 인수로 전달받은 시간으로 단 한 번 동작하는 타이머를 생성한다. 이후, 타이머가 만료되면, 첫 번째 인수로 전달한 콜백 함수를 호출한다. ```jsx // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. setTimeout(() => console.log("Hi!"), 1000); // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.// 이때 콜백 함수에 'Lee'가 인수로 전달된다. setTimeout((name) => console.log(`Hi! ${name}.`), 1000, "Lee"); // 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다. setTimeout(() => console.log("Hello!")); ``` `setTimeout` 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다. 이 id를 `clearTimeout` 함수의 인수로 전달해 타이머를 취소할 수 있다. ```jsx // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. // setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다. const timerId = setTimeout(() => console.log("Hi!"), 1000); // setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소한다. 타이머가 취소되면 setTimeout 함수의 콜백 함수가 실행되지 않는다. clearTimeout(timerId); ``` ## ✨ setInterval / clearInterval `setInterval` 함수는 두 번째 인수로 전달받은 시간으로 동작하는 타이머를 생성한다. 이후 타이머가 만료될 때마다 첫 번째 인수로 전달받은 콜백 함수가 반복 호출된다. 마찬가지로, 반환하는 id 를 `clearInterval`에 전달하면, 타이머를 취소할 수 있다. ```jsx let count = 1; // 1초(1000ms) 후 타이머가 만료될 때마다 콜백 함수가 호출된다. // setInterval 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다. const timeoutId = setInterval(() => { console.log(count); // 1 2 3 4 5 // count가 5이면 setInterval 함수가 반환한 타이머 id를 clearInterval 함수의 인수로 전달하여 타이머를 취소한다. 타이머가 취소되면 setInterval 함수의 콜백 함수가/실행되지 않는다. if (count++ === 5) clearInterval(timeoutId); }, 1000); ```
# 🌟 디바운스와 스로틀 `scroll`, `resize`, `input`, `mousemove` 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어, 성능에 문제를 일으킬 수 있다. `디바운스`와 `스로틀`은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다. ```html

일반 클릭 이벤트 카운터    0

디바운스 클릭 이벤트 카운터 0

스로틀 클릭 이벤트 카운터   0

``` ## ✨ 디바운스 디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면, 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 즉, 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다. 예를 들어, 텍스트 입력 필드에서 `input` 이벤트가 짧은 시간 간격으로 연속해서 발생하는 경우를 살펴보자. ```html

``` `input` 이벤트는 사용자가 텍스트 입력 필드에 값을 입력할 때마다 연속해서 발생한다. 만약, 이때마다 `AJAX` 요청 같은 무거운 요청을 한다면, 서버에 큰 부담을 주게 된다. `debounce` 를 사용할 경우, 사용자가 입력을 완료한 이후, 특정 요청을 할 수 있도록 만들 수 있다. (이때, 완료의 기준은 timer 설정 시간이 끝났는지를 기준으로) ## ✨ 스로틀 스로틀은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도, 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되로록 한다. 즉, 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출 되도록 한다. ```html

일반 이벤트 핸들러가 scroll 이벤트를 처리한 횟수: 0

스로틀 이벤트 핸들러가 scroll 이벤트를 처리한 횟수: 0

```

타이머 [모던 자바스크립트 Deep Dive 41장]

이벤트 [모던 자바스크립트 Deep Dive 40장]