타이머

호출 스케줄링

setTimeout, setInterval : 타이머를 생성할 수 있는 함수.
clearTimeout, clearInterval: 타이머를 제거할 수 있는 함수.

타이머 함수는 ECMAScript에 정의된 빌트인 함수가 아닌 브라우저 환경과 Node.js 환경에서의 전역 객체의 메서드이다. 즉 호스트 객체이다.

자바 스크립트 엔진은 싱글 스레드 이므로 타이머 함수는 비동기 방식으로 동작한다.

타이머 함수

setTimeout/clearTimeout

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
setTimeout(() => console.log('Hi!'), 1000);

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
// 이때 콜백 함수에 'Lee'가 인수로 전달된다.
setTimeout(name => console.log(`Hi! ${name}.`), 1000, 'Lee');

// 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다.
setTimeout(() => console.log('Hello!'));

• 첫번째 인수: 타이머가 만료된 뒤 호출할 콜백 함수
• 두번째 인수: 타이머 만료 시간
• 세번째 인수: 콜백 함수에 전달해야할 인수가 존재하는 경우 전달할 수 있다.

const timerId = setTimeout(() => console.log('Hi!'), 1000);

clearTimeout(timerId);

• setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소한다.

setInterval/ clearInterval

let count = 1;

const timeoutId = setInterval(() => {
  console.log(count); // 1 2 3 4 5
  if (count++ === 5) clearInterval(timeoutId);
}, 1000);

• 두 번째 인수로 전달받은 시간으로 반복 동작하는 타이머 생성

디바운스와 스로틀

디바운스

• 디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출 되도록 한다.

스로틀

• 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다. 즉 연속해서 발생하는 이벤트를 그룹화 해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 한다.