이런 째깍둥이를 봤나⏰ 자바스크립트 Timer 함수

전종훈입니다·2023년 5월 28일
1

JavaScript

목록 보기
2/2
post-thumbnail

보통 함수를 명시적으로 호출하면 즉시 실행된다. 하지만 개발을 하다보면 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 함수를 호출하고 싶을 때가 있다. 자바스크립트에서는 함수 호출을 예약하려면 타이머 함수를 이용해야한다. 이를 호출 스케줄링이라고 한다.

자바스크립트에는 타이머를 생성, 제거 할 수 있는 함수를 제공한다.

타이머 생성 / 제거 함수

  • setTimeout / clearTimeout
  • setInterval / clearInterval

이 타이머 함수는 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드이다. 또한, 호스트 객체이다.

  • 호스트 객체란?
    • 자바스크립트 호스트 객체(JavaScript host objects)는 자바스크립트 코드가 실행되는 환경에서 제공하는 객체를 의미
    • 호스트 객체는 브라우저, 서버 또는 다른 실행 환경에 의해 제공되며, 자바스크립트 코드가 해당 환경과 상호 작용하고 외부 기능을 사용 가능하게 해줌

동작은 어떻게 하는가?

  • 타이머 함수는 생성한 타이머가 만료되면 콜백 함수가 호출
  • setTimeout 은 타이머가 만료되면 한번만 호출
  • setInterval 은 타이머가 만료될 때마다 반복 호출
  • 자바스크립트 엔진은 싱글 스레드 → 두가지 이상의 태스크 동시 실행 X → 따라서 타이머 함수는 비동기 처리 방식으로 동작

사용은 어떻게 하는가?

// 타이머 아이디를 반환
// 3초 뒤에 콜백 함수를 실행 => JongHun 출력
// 인자는 콜백함수 외 생략 가능
const timeoutId = setTimeout((name)=> {console.log(name)},3000,'JongHun');

// 콜백 함수 대신 문자열 코드 넣어도 똑같이 실행 => 권장되는 방식은 아니라고함
// 자바스크립트의 eval 함수와 유사
const timeoutId2 = setTimeout('console.log("wow")',3000);

// setInterval도 사용법은 같다
  • delay에 관혀여
    • delay 시간이 설정된 타이머가 만료되면 콜백 함수가 즉시 호출되는 것이 보장 X → delay 시간은 태스크 큐에 콜백 함수를 등록하는 시간을 지연할 뿐
    • delay가 4ms 이하인 경우 최소 지연시간 4ms가 지정됨
    • 생략한 경우 기본값 0초
  • params
    • 호출 스케줄링된 콜백 함수에 전달해야하는 인수가 존재하는경우 세번째 인자로 전달 가능

타이머 id 반환값은 실행 환경에 따라 다르다. 브라우저는 number, Node.js는 객체이다.

그렇다면 clear 함수는 언제 사용해야하는거야?

기본적으로 타이머를 사용했다면 clear를 통해서 제거 해주는게 좋다.

자바스크립트에서 타이머를 사용하고 제거하지 않으면 다양한 상황이 발생할 수 있다.

  • 메모리 누수
    • 타이머가 계속 실행되는 동안 해당 타이머와 관련된 리소스가 계속해서 유지
    • 이로 인해 메모리 누수가 발생할 수 있고, 장기간 실행되는 페이지에서는 성능 저하가 발생
  • 예기치 않은 동작
    • 타이머가 계속 실행되면서 원하지 않는 동작이 발생
    • 예를 들어, 페이지가 이동하거나 상태가 변경될 때 타이머가 아직 실행 중이라면 예기치 않은 결과가 발생
  • 자원 낭비
    • 타이머가 계속 실행되면서 CPU 및 배터리와 같은 자원을 지속적으로 소비
    • 이로 인해 사용자의 기기나 브라우저 성능에 영향 줌
  • 충돌 가능성
    • 여러 개의 타이머가 동시에 실행되거나 중복된 타이머가 생성되는 경우 충돌이 발생
    • 이는 코드의 예측할 수 없는 동작 발생
const timeoutId = setTimeout((name)=> {console.log(name)},3000,'JongHun');
// 사용하고 나서 꼭 써주자
clearTimeout(timeoutId);

타이머에 대해서는 좀 더 알아야할 내용들이 많다! 특히, 이벤트 루프를 통해서 어떻게 작동하는지, 테스크 큐에 어떤 순서로 들어가는지, 우선순위는 어떤지 등등 알아야할 내용들이 있다. 이 내용은 이벤트 루프를 알아보면서 자세하게 적어 볼 예정이다.

우선, 타이머에 대해 간략하게 적은 내용이니 사용법과 핵심을 알 수 있다고 생각한다!

profile
기타치는 프론트 개발자

0개의 댓글