본문 바로가기
Programming/JavaScript

[JavaScript] setInterval과 setTimeout의 차이점

by 혀코 2022. 7. 21.

 

안녕하세요. 혀코입니다.

이번 시간에는 JavaScript의 setInterval과 setTimeout 함수의 차이점에 대해서 알아보겠습니다.

 

setTimeout()

일정한 시간이 지나고 함수를 실행할 때 사용합니다.

setTimeout은 parameter로 실행할 함수와, 시간 이렇게 두개를 받거나 실행할 함수가 받는 parameter의 개수를 더한 만큼의 parameter를 받습니다.

 

실행할 함수에 parameter 가 없는 경우 다음과 같이 작성합니다.

 

function welcomeMessage() {
	console.log('Hello World');
}

setTimeout(welcomeMessage, 2000);

 

실행할 함수에 parameter가 있는 경우 다음과 같이 작성합니다.

 

function welcomeMessage(a, b) {
	console.log('Hello World, ' + a + ' ' + b);
}

setTimeout(welcomeMessage, 2000, 'Christopher', 'Hemsworth');

// Hello World. Christopher Hemsworth

 

인라인으로 작성하는 경우 다음과 같이 작성합니다.

 

setTimeout(() => {
	console.log("Hello World");
}, 2000);

 

setTimeout을 변수에 할당하는 경우, clearTimeout에 해당 변수를 parameter 값으로 넘기면 함수실행을 실행전에 취소할 수 있습니다.

 

setInterval()

반복적으로 실행되는 함수를 구현할 때 사용합니다.

setInteval() 의 사용법은 setTimeout과 동일합니다. parameter 값으로 두개 그리고 실행할 함수의 parameter의 개수 만큼 paramter를 가질 수 있습니다.

 

실행할 함수에 parameter 가 없는 경우 다음과 같이 작성합니다.

 

function welcomeMessage() {
	console.log('Hello World');
}

setInterval(welcomeMessage, 2000);

 

위 코드의 경우, 무한히 함수를 실행하기 때문에 setTimeout과 clearInterval 함수를 사용해서 일정시간이 지난 다음 프로세스를 멈추게 해줍니다.

 

 

실행할 함수에 parameter 가 있는 경우 다음과 같이 작성합니다.

 

 

또한 setInterval은 setTimeout을 recursive function 형식으로 사용해서 구현할 수 있습니다.

 

let timerId = setTimeout(function tick() {
  console.log('tick');
  timerId = setTimeout(tick, 5000); // (*)
}, 2000);

 

2초 있다가 tick을 출력하고 후에 5초 간격으로 tick을 출력합니다.

 

이렇게 JavaScript의 setInterval과 setTimeout 함수의 차이점에 대해서 알아봤습니다.

해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)

댓글