[JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - setTimeout, setInterval

앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다.

이번 포스팅에서는 setTimeout과 setInterval에 대해서 알아보도록 하자.

1. setTimeout: 일정 시간이 지난 후 함수 실행

// (1)
function fn() {
	console.log(3);  
}
setTimeout(fn, 3000);

// (2)
setTimeout(function(){
	console.log(3);
}, 3000);

• 위의 코드는 3초 후에 실행이 되는 코드이다.
• setTimeout은 2개의 매개변수를 받는다. (일정 시간이 지난 후 실행될 함수와 시간)
• 만약 인수가 필요한 함수라면 시간 뒤에 써주면 된다.
  (ex. setTimeout(showName, 3000, 'Mike') -> 함수, 시간, 매개변수 순으로!)

2. clearTimeout: 예정된 작업을 없앰

위와 같이 setTimeout은 tId를 반환하게 되는데 clearTimeout을 사용하게 되면 스케줄링을 취소할 수 있음. 3초가 지나기전에 clearTimeout이 실행되기 때문에 아무일도 일어나지 않음.

3. setInterval: 일정 시간마다 함수 실행

function showName(name) {
	console.log(name);  
}
const tId = setInterval(showName, 3000, 'Mike');

위의 코드를 실행시켜보면 3초마다 Mike가 출력되는 것을 확인할 수 있다.
마찬가지로 중간에 중단하려면 clearInterval을 호출하면 된다.

4. 주의사항

setTimeout(function() {
	console.log(2);  
}, 0);
console.log(1);

위와 같은 코드가 있다고 가정해보자. 얼핏 보면 setTimeout의 시간이 0초로 걸려있기 때문에 순서대로 진행이 될 것 같지만 그렇지 않다.
이유는 현재 실행중인 스크립트가 종료된 이후 스케줄링을 실행되기 때문이다.
그리고 0이라고 바로 실행되는 것이 아니라 브라우저에서는 4ms 정도의 대기시간이 있기 때문에 다음과 같이 진행된다.

5. 예제

let num = 0;

function showTime() {
	console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다. `};
    if (num > 5) {
		clearInterval(tId);
    }
}
const tId = setInterval(showTime, 1000);

위의 예제는 5초까지만 console에 출력하는 예제이다. 이렇게 시간을 제한을 두고싶으면 다음 예제와 같이 clearInterval을 if문과 같이 사용하면 될 것 같다.

(해당 포스팅의 내용은 유튜브 코딩앙마님의 영상을 참고했습니다)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4