1. setTimeout() 함수와 setInterval() 함수
setTimeout() 및 setInterval()은 둘 다 자바스크립트에서 사용되는 타이머 함수이다. setTimeout() 함수는 지정된 시간이 지난 후에 한 번만 함수를 실행하는 데 사용된다. 예를 들어, 일정 시간 후에 어떤 작업을 수행하거나 지연 실행이 필요한 경우에 유용하다. setInterval() 함수는 지정된 시간 간격으로 함수를 주기적으로 실행하는 데 사용된다. 주기적인 작업이 필요한 경우, 예를 들어 실시간 업데이트, 애니메이션 등에 사용된다.
간단히 말하면, setTimeout()은 한 번의 지연 실행에 사용되며, setInterval()은 주기적인 반복 작업에 사용된다. 선택적으로 setInterval()을 중지할 수 있지만, setTimeout()은 한 번 실행되고 끝나므로 명시적인 중지가 필요하지 않다.
예제 코드 - setTimeout()
setTimeout(function(){
// 실행할 코드
}, 1000);
첫 번째 파라미터로 실행한 코드를 포함한 함수를 넣고 두 번째 파라미터로 코드를 실행하기까지의 지연 시간을 밀리초(1/1000초) 단위로 넣으면 된다. 따라서 위의 예제 코드의 결과는 1초 후에 주석 처리된 '//실행할 코드' 부분에 정의된 코드가 한 번 실행된다.
예제 코드 - setInterval()
setInterval(function(){
// 실행할 코드
}, 1000);
마찬가지로 첫 번째 파라미터로 실행할 함수를 넣고 두 번째 파라미터로 실행할 지연 시간을 밀리초 단위로 넣으면 된다. setTimeout()과의 차이점은 setInterval()은 매 지연 시간마다 코드를 반복 실행한다. 위의 예제의 경우 '// 실행할 코드' 부분을 1초마다 실행한다. 따라서 setInterval() 함수 같은 경우 명시적인 중지가 필요하다.
2. setTimeout() 함수 예제
예제 코드 1
<!DOCTYPE html>
<html>
<head>
<title>setTimeout() 예제</title>
</head>
<body>
<button id="startButton">시작</button>
<div id="output"></div>
<script>
// JavaScript 코드
function sayHello() {
document.getElementById("output").textContent = "Hello, World!";
}
document.getElementById("startButton").addEventListener("click", function () {
setTimeout(sayHello, 2000); // 2초(2000 밀리초) 후에 sayHello 함수 실행
});
</script>
</body>
</html>
"시작" 버튼을 클릭하면 setTimeout() 함수를 호출한다, setTimeout() 함수의 첫 번째 파라미터로 sayHello() 함수가 들어가므로 sayHello() 함수 안에 코드가 실행된다. 따라서 결과는 버튼 클릭 후 2초 뒤에 "Hello, World!" 문자열이 "output" 아이디를 가진 <div> 태그 안에 표시된다.
예제 코드 2
<!DOCTYPE html>
<html>
<head>
<title>setTimeout() 함수와 매개변수</title>
</head>
<body>
<button id="startButton">시작</button>
<div id="output"></div>
<script>
// JavaScript 코드
function sayHello(message) {
document.getElementById("output").textContent = message;
}
document.getElementById("startButton").addEventListener("click", function () {
setTimeout(function () {
sayHello("Hello, World!"); // 2초(2000 밀리초) 후에 sayHello 함수 실행
}, 2000);
});
</script>
</body>
</html>
만약 setTimeout()의 첫 번째 파라미터로 매개변수를 필요로 하는 함수를 넣어야 할 경우 위의 예제와 같이 파라미터로 익명 함수를 넣고 그 안에서 sayHello() 함수를 호출하면 된다.
3. setInterval() 함수 예제
예제 코드 - 시계 만들기
<!DOCTYPE html>
<html>
<head>
<title>setInterval() 예제</title>
</head>
<body>
<div id="clock">현재 시간 : <span id="time">--:--:--</span></div>
<script>
// JavaScript 코드
function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
document.getElementById("time").textContent = timeString;
}
// 1초(1000 밀리초)마다 updateClock 함수 실행
setInterval(updateClock, 1000);
// 페이지 로딩 시에도 한 번은 실행
updateClock();
</script>
</body>
</html>
setInterval() 함수의 첫 번째 파라미터로 updateClock() 함수를 넣고 지연 시간은 1초로 한다. 코드가 실행되면 1초마다 updateClock() 함수가 실행하고 updateClock() 함수는 현재의 시간, 분, 초를 가져와 "clock"이라는 아이디를 가진 <div> 태그에 출력한다.
| 메서드 |
내용 |
| getHours(), getMinutes(), getSeconds() |
Date 객체의 메서드로 현재 날짜와 시간 부분에서 시간은 0~23 사이의 정수를, 분,초는 0~59 사이의 정수를 반환한다. |
| toString() |
시간을 문자열로 변환한다. 이 과정을 거치면 숫자가 문자열로 변환된다. |
| padStart() |
문자열을 특정 길이로 늘리는 데 사용된다. 주로 문자열을 형식화할 때 특정 길이에 맞춰 문자열을 채우는 데 활용된다. 첫 번째 파라미터는 최종 문자열 길이를 나타내는 정수이고 두 번째 파라미터는 원본 문자열을 늘릴 때마다 사용할 문자열이다(기본값은 ""이다). 예를 들어, '9'를 '09'로 늘리고 싶다면 padStart(2,'0')으로 하면 된다. 채울 문자열은 원본 문자열의 왼쪽부터 채워진다. 만약 이미 원본 문자열의 길이가 첫 번째 파라미터와 같다면 아무런 패딩도 추가하지 않는다. |
읽어주셔서 감사합니다.