[JS] 41. 타이머

1. 호출 스케줄링

함수를 즉시 실행하지 않고 일정 시간 경과 후 함수 호출을 예약하는 것

2. 타이머 함수

타이머 함수는 호스트 객체이다.

타이머 함수는 콜백함수의 실행 시간을 조절 시켜준다.

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

2.1 setTimeout/ clearTimeout

delay 시간이 완료되면 한 번만 콜백함수를 호출합니다.

setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.

2.2 setInterval/ clearInterval

여러번 콜백 함수를 호출합니다.
타이머가 취소 될 때까지 계속된다.
반복 실행되도록 호출 스케줄링된다.

3. 디바운스와 스로틀

과도한 이벤트 호출을 방지하는 프로그래밍 기법

3.1 디바운스

사용자 입력이 완료했는지 여부는 정확하게 알 수 없으므로 일정 시간 동안 텍스트 입력 필드에 값을 입력하지 않으면 입력이 완료된 것으로 간주한다.

디바운스는 delay 시간 이전에 함수를 호출하면 이전 타이머 함수는 제거하고 새로운 타이머 함수를 설정한다.

delay동안 더 이상 이벤트가 발생하지 않으면 한 번만 호출된다.

갱신되는 타이머 함수를 갱신

3.2 스로틀

일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.

갱신되는 타이머 함수를 무시

스로틀은 delay 시간 이전에 함수를 호출하면 호출된 delay 시간은 무시되고 기존 delay 함수가 실행된다.

만약 기존 delay 시간이 완료되면 새로운 delay 시간이 설정된다.