setTimeout에 대하여
함수의 두번째 파라미터로 타임을 지정하고, 그 시간이 경과될 경우 첫 번째 파라미터의 익명함수 혹은 함수 또는 코드를 실행하는 함수이다.
// 문법
setTimeout(func, time);
// 예시
setTimeout(showAlert, 100);위와 같이 쓰이는데 이때 time은 ms(1000분의 1초) 단위로 0.5초는 500, 1초는 1000을 사용한다.
해당 함수의 리턴값은 setTimeout인 타이머의 id, 즉 고유값이 나오고 해당 id를 이용해 타이머를 종료해줄 때 사용할 수 있다. 이 때 종료는 clearInterval 도 가능하지만 가능하면 clearTimeout을 사용하도록 한다.
기능은?
기능은 정말 간단하게, 일정시간 이후에 함수를 실행시키는 것 뿐이다.
<button id="clickBtn">클릭</button>
<script>
document.getElementById("clickBtn").addEventListener(function(){
alert("사용자가 클릭");
setTimeout(function(){
alert("3초 뒤 뜨는 것")
}, 3000);
});
</script>혹은 더 간결하게 표현한다면
function showAlert(){
alert('3초뒤 뜨는 것');
}
document.getElementById('clickBtn').addEventListener(function(){
alert('사용자가 클릭');
setTimeout(showAlert, 3000);
});작동방식 혹은 유의점
만약 setTimeout을 반복적으로 호출하고 싶다면?
반복적 호출이라고 하면 보통 setInterval을 생각할 수 있다.
하지만 여기서 setInterval과 setTimout의 가장 큰 차이점에 의해 setTimeout이 조금 더 안정적이다.
setInterval 코드를 보자.
var i=1;
setInterval(function(){
func(i);
}, 100);setTimeout 코드는 아래와 같다.
var i=1;
setTimeout(function run(){
func(i);
});결과는 같겠지만, 결코 같지 않다.
setInterval을 사용하면 func 함수 호출 사이의 지연 간격이 지정한 100ms보다 더 짧아진다.
그 이유는 100ms 지연 간격에 func 코드를 실행하는 시간도 포함되기 때문에, 점점 타임이 뒤로 밀린다. 그렇게 계속 딜레이 되다가, func 함수를 실행하는 데 걸리는 시간이 100ms보다 길면, func 함수 실행이 종료될 때까지 기다리고 바로 다음 호출을 시작한다.
즉 함수 호출 간격인 100ms가 더 이상 의미가 없어지는 것이다.
그에 반해 setTimeout의 똑같은 100ms 딜레이에, func 함수 호출이 끝난 뒤에 100ms라는 간격을 체크하기 때문에 항상 간격이 일정하게 유지될 수 있다.
setTimeout에서 대기 시간, 즉 딜레이 시간을 0으로 설정한다면?
setTimeout(showAlert, 0);이런 경우는 setTimeout 파라미터인 함수를 최대한 빨리 실행할 수 있다. 하지만 현재 실행중인 스크립트 처리가 종료된 이후 함수를 실행한다.
setTimeout(() => alert('world'));
alert('hello');위와 같은 코드가 있다면 world가 먼저 뜨지 않고, 현재 실행중인 스크립트 처리가 종료된 이후 실행하므로 hello 가 먼저 뜨고 그 뒤에 world가 뜬다.
즉, 실행 순서가 [현재 실행중인 스크립트] > [setTimeout] 이다.
참고