이번에 이벤트핸들러를 개발하면서 연속적으로 이벤트가 발생했을 때, 유도한 결과대로 웹이 동작하지 않았다. 이를 최적화 하기 위해 **디바운싱(debouncing)과 쓰로틀링(throttling)**에 대해 알아 보았다.

들어가기 전

• setTimeout() - 함수의 실행을 예약하는 타이머 기능
• clearTimeout() - 타이머의 실행을 취소하는 기능
• 디바운싱 - 빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법
• 쓰로틀링 - 빈번하게 발생하는 이벤트를 '일정한 간격으로 한번만' 실행 시키는 최적화 기법

setTimeout() - 함수의 실행을 예약하는 타이머 기능

setTimeout() 함수는 브라우저에서 제공하는 Web API로, 지정된 시간 후에 함수를 실행 하는 데 사용한다.

const timerId = setTimeout(callbackFunction, timeout);

JavaScript

Copy code

• callbackFunction - 타이머가 만료되면 실행할 함수
• timeout - 함수를 실행하기전까지 기다릴 밀리초 단위의 시간

timeout을 생략하거나 0으로 설정하면 즉시, 정확히는 다음 이벤트 사이클에 실행된다. 실제로는 딜레이가 0보다 더 길 수 있는데 그 이유는 어쨌든 이벤트 루프는 무엇입니까? 영상을 참고하자.

코드

function delayFunction() {
  console.log('300 밀리초 뒤에 호출됩니다.');
}

const timerId = setTimeout(delayFunction, 300);

console.log(`Timer ID: ${timerId}`);
// Timer ID: [number]
// 300 밀리초 뒤에 호출됩니다.

JavaScript

Copy code

clearTimeout() - 타이머의 실행을 취소하는 기능

clearTimeout() 함수는 타이머의 실행을 취소하는 기능을 한다. 그게 어떻게 가능할까? clearTimeout() 함수는 설정한 시간이 되기 전에 setTimeout() 함수를 호출하여 타임아웃(시간 초과)을 막는다.