[JS] setTimeout()과 setInterval() 함수

자바스크립트의 내장함수중에 비동기함수인 setTimeout()과 setInterval()에 대해서 알아보고자 한다.

1. setTimeout()

특정 코드를 바로 실행하지 않고, 일정시간을 기다린 후 실행하는 함수이다.

setTimeout() 함수는 2개의 인자를 받는다. 첫번째 인자는 실행할 코드를 담는 함수를 받고, 두번째 인자로 지연되는 시간을 밀리초(ms) 단위로 받는다.

setTimeout(()=>console.log("2초 뒤에 실행"), 2000);

 

세번째 인자의 자리 부터는 가변 인자를 받는다.

첫번째 인자로 넘어온 함수가 인자를 받는 경우, 이 함수에 넘길인자를 명시해주기 위해서 사용한다.

예시) 두개의 인자를 더한 값을 출력하는 add함수에 필요한 2개의 값을 세번째와 네번째 인자 자리에 작성한다.

function add(x, y){
	console.log(x + y);
}

setTimeout(add, 2000, 3, 3);

2초 기다린 뒤 출력-> 6

 

clearTimeout() 함수를 호출하면 기다렸다가 실행될 코드를 취소할 수 있다.

 

2. setInterval()

setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.

해당 함수를 사용하는 예시 :

• 웹 페이지의 특정 부부을 주기적으로 업데이트를 해주어야 하는 경우
• 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우

setTimeout()과 마찬가지로 setInterval() 함수의 첫번째 인자로 실행할 코드를 담고있는 함수를 받고, 두번째 인자로는 반복 주기를 밀리초(ms) 단위로 받는다.

setInterval(()=> console.log(new Date()), 2000);

2초 단위로 출력되는 코드들 -> 
Wed Jun 28 2023 11:57:06 GMT+0900 (한국 표준시)
Wed Jun 28 2023 11:57:08 GMT+0900 (한국 표준시)
Wed Jun 28 2023 11:57:10 GMT+0900 (한국 표준시)
...

 

clearInterval() 함수를 호출하면 코드가 주기적으로 실행되는 것을 중단시킬 수 있다.

 

참고 사이트 : https://www.daleseo.com/js-timer/