타임아웃 코드 반복 호출하는 코드로 setInterval()을 사용하는것이 일반적이지만,
이번에는 setTimeout()을 이용하여 setInterval()과 같은 역할을 수행하는 코드를 작성해보기로 한다.
먼저, setInterval()을 이용한 코드를 확인해보자,
10밀리초(=1초) 주기로 changeTime()을 호출하여 현재 시간을 표시하는 간단한 예시이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div> <span id="span"></span> </div>
<script>
let span = document.getElementById("span");
let timerID = setInterval("changeTime()", 10); // 10밀리초 주기로 changeTime() 호출
function changeTime() {
let str = span.innerHTML;
let newtime = new Date();
span.innerHTML = newtime.getHours() + ":" + newtime.getMinutes() + ":" + newtime.getSeconds();
}
</script>
</body>
</html>setTimeout()을 이용하여 이와 동일한 결과물을 만들어 내는 것은 간단하다.
바로 setTimeout()을 재귀적으로 사용하면 된다.
아래는 재귀적으로 setTimeout()을 사용하여 위의 코드와 동일한 결과물을 만드는 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div> <span id="span"></span> </div>
<script>
let span = document.getElementById("span");
function changeTime() {
let str = span.innerHTML;
let newtime = new Date();
span.innerHTML = newtime.getHours() + ":" + newtime.getMinutes() + ":" + newtime.getSeconds();
let timerID = setTimeout("changeTime()", 10); // 10밀리초 주기로 changeTime() 호출
}
changeTime();
</script>
</body>
</html>이와같이 재귀를 사용하면 setTimeout()도 주기적으로 불러와서 사용할 수 있다.
특정 횟수만 반복하게 하려면, 별도의 변수를 추가해서 changeTime()이 실행될때마다 변수값을 증가시킨 다음,
변수가 특정 값이 되면 clearTimeout(TimerID)을 실행시켜 타이머를 종료시키면 된다.
'WEB > 💡 Javascript' 카테고리의 다른 글
| [Javascript] 역따옴표(백틱)을 이용한 템플릿 리터럴(template literal) (0) | 2022.07.27 |
|---|---|
| [Javascript] '=='와 '==='의 차이점 (0) | 2022.07.27 |
| [Javascript] 아코디언 메뉴 만들기 (접기/펼치기 기능 구현) (0) | 2022.07.20 |
| [Javascript] getElementsByClassName과 querySelectorAll의 차이 (HTMLCollection과 NodeList의 차이) (0) | 2022.07.14 |
| [Javascript] DOMContentLoaded와 onload의 차이 (0) | 2022.07.14 |