[JS] setTimeout()과 setInterval() 함수를 알아보자!

Frontend/JavaScript

[JS] setTimeout()과 setInterval() 함수를 알아보자!

fladi 2024. 3. 7. 21:07

728x90

자바스크립트에서 일정 시간 이후에 어떤 메서드가 호출되게 하고싶다면 setTimeout()과 setInterval() 함수를 사용할 수 있다.

둘의 사용법을 요약하면,

setTimeout()은 지정된 함수를 한 번만 호출할 때 사용하고,
setInterval()은 지정된 함수를 반복적으로 호출할 때 사용하는 함수이다.

setTimeout()

var timeoutId = setTimeout(functionRef, delay]);
var timeoutId = setTimeout(functionRef, delay, param1, param2, ...);
var timeoutId = setTimeout(code, delay, param1, param2, ...); //권장 x

지정된 시간이 만료된 후 함수나 코드를 실행하는 함수이다.

functionRef
- 타이머가 만료된 후 실행될 함수이다.
- code는 함수대신 포함할 수 있는 문자열인데, eval()을 사용하는 것과 동일한 이유로 권장되지 않는다
delay
- 주어진 함수/코드를 실행하기 전 기다릴 밀리초 단위의 시간이다
- 생략 시 0으로 설정되며, 다음 이벤트 사이클에 즉시 실행된다
arg
- function에 전달할 추가 매개변수
return 값
- 해당 타임아웃의 식별자를 반환한다.
- 이 타임아웃 id는 나중에 clearTimeout() 메서드로 해당 타임아웃을 취소할 때 사용할 수 있다.

setTimeout(() => {
  console.log("첫 번째 메시지");
}, 5000);
setTimeout(() => {
  console.log("두 번째 메시지");
}, 3000);
setTimeout(() => {
  console.log("세 번째 메시지");
}, 1000);

//출력: 
//세 번째 메시지
//두 번째 메시지
//첫 번째 메시지

setTimeout은 비동기 함수로, 함수 스택의 다른 호출을 막지 않는다. 그렇기 때문에 위 코드는 세 번째 메시지부터 출력된다.

setTimeout에서의 this 사용

setTimeout에서의 this를 사용하면 내부 this값이 예상과 다르게 나올 수 있기 때문에 유의해야한다. 이는 javascript가 java와 달리 호출함수의 this 키워드값을 설정하기 때문이다.

이를 해결하기 위해서는 다음과 같은 방법을 사용할 수 있다.

(1) 다른 함수로 감싸기

(2) bind()를 사용

더 자세한 내용이 궁금하면 아래 레퍼런스를 참고하자!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

clearTimeout()

clearTimeot(timeoutID)

setTimeout 함수에서 반환받은 타임아웃 아이디를 넣어서 해당 타임아웃을 종료시킬 수 있다.
timeoutID가 해당 id를 식별하지 못하면 아무 동작도 하지 않는다.

setTimeout과 clearTimeout 예제

const alarm = {
  remind(aMessage) {
    alert(aMessage);
    this.timeoutID = undefined;
  },

  setup() {
    if (typeof this.timeoutID === "number") {
      this.cancel();
    }

    this.timeoutID = setTimeout(
      (msg) => {
        this.remind(msg);
      },
      1000,
      "일어나세요!",
    );
  },

  cancel() {
    clearTimeout(this.timeoutID);
  },
};
window.addEventListener("click", () => alarm.setup());

윈도우 창에 click 이벤트 발생 시 1초 뒤 "일어나세요!" alert 창이 한 번만 뜨는 걸 볼 수 있다.

setInterval()

var timeoutId = setInterval(code) //권장x
var timeoutId = setInterval(code, delay) //권장x

var timeoutId = setInterval(func)
var timeoutId = setInterval(func, delay)
var timeoutId = setInterval(func, dealy, arg0, arg1, ... , argN)

지정된 시간에 코드/함수를 반복적으로 실행하는 함수이다.

매개변수들과 반환값은 setTimeout()과 동일하다. this문제도 발생가능하기 때문에 유의해야한다.

setInterval()의 timeoutId는 clearInterval() 메서드에 전달되어 해당 타임아웃을 종료할 수 있다.

* 참고: setInterval()과 setTimeout()은 동일한 ID풀을 공유하기 때문에 clearInterval()과 clearTimeout()은 기술적으로 상호 교환하여 사용가능하다. 하지만 명확성을 위해 항상 일치하도록 하는 게 좋다.

interval의 중첩

setInterval()에 대한 콜백이 setInterval()을 호출하여 첫 번째 interval이 진행중이어도 다른 interval이 실행될 수 있다.
성능에 미칠 수 있는 잠재적인 영향을 완화하기 때문에 interval이 5개 수준 이상으로 중첩되면 브라우저는 자동으로 itnerval에 4ms 최소값을 적용한다
- 즉, 중첩 호출이 심화된 setInterval() 호출에서는 4ms 미만의 interval값을 지정해도 4ms로 고정된다.

실행시간이 interval 빈도보다 짧은 경우

(function loop() {
	setTimeout(() -> {
		//로직
	
		loop();
	}, delay);
})();

로직의 실행시간이 interval 시간보다 오래 걸린다면 setTimeout()을 사용하여 함수를 재귀적으로 호출하는 게 더 좋다.
이는 고정 간격에서 실행을 보장하지 않지만, 이전 간격이 재귀하기 전에 로직의 실행이 완료됨을 보장한다.

clearInterval()

clearInterval(intervalID)

clearTimeout()과 거의 동일하기 때문에 생략한다

참고자료

https://developer.mozilla.org/ko/docs/Web/API/clearTimeout

clearTimeout() 전역 함수 - Web API | MDN

전역 clearTimeout() 메서드는 setTimeout()으로 생성한 타임아웃을 취소합니다.

developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

728x90