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

41. 타이머

 

41.1 호출 스케줄링

 

• 호출 스케줄링 : 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다.

 

41.2 타이머 함수

1. setTImeout/clearTimeout

• setTimeout 함수의 콜백 함수는 두번째 인수로 전달 받은 시간 이후 단 한번 실행되도록 호출 스케줄링된다.
• claerTimeout 함수는 호출 스케일링을 취소한다.

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

//1초(1000ms) 후 타이머가 만료되면 콜백함수가 호출된다.
setTimeout(() => console.log('Hi'),1000);
//1초(1000ms) 후 타이머가 만료되면 콜백함수가 호출된다.
//이때 콜백함수에 'Lee' 가 인수로 전달된다
setTimeout(() => console.log(`Hi ${name}`),1000,'Lee');
//두번째 인수(delay)를 생략하면 기본값 0이 지정된다.
setTimeout(() => console.log('Hello'))

 

2. setInterval/clearInterval

• setInterval 함수의 콜백 함수는 두번째 인수로 전달받은 시간이 경과할 때마다 반복 실행되도록 호출 스케줄링된다.
• clearInterval 함수는 호출 스케줄링을 취소한다.

 

41.3 디바운스와 스로틀

• 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러 호출을 방지하는 프로그래밍 기법

1. 디바운스

• 짧은 시간 간격을로 발생하는 이벤트를 그룹화해서 마지막에 한번만 이벤트 핸들러가 호출되도록 한다.
• debounce 함수나 Lodash의 debounce 함수를 사용하는 것을 권장

2. 스로틀

• 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.