안녕하세요. 혀코입니다.
이번 시간에는 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 함수의 차이점에 대해서 알아봤습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글