4.1 setTimeout 함수
JavaScript의 타이머는 특정 작업을 지정된 시간 간격 후에 실행할 수 있게 해줘. 타이머 작업을 위한 두 가지 주요 메서드는 setTimeout()와 setInterval()가 있어. 얘네는 코드를 지연하거나 정기적인 시간 간격으로 실행하기 위해 사용돼.
setTimeout() 메서드는 함수가 지정된 밀리초 뒤에 한 번 실행되도록 해줘. 코드의 실행을 연기하는 데 유용해.
문법:
const timeoutID = setTimeout(callback, delay, ...args);
여기서:
callback: 실행될 함수delay: 함수가 실행되기 전의 지연 시간(밀리초)args:callback함수로 전달될 추가 인수들
setTimeout() 사용 예:
JavaScript
// 2초 후에 실행될 함수
function greet() {
console.log('Hello, world!');
}
// 타이머 설정
const timeoutID = setTimeout(greet, 2000);
4.2 setTimeout 타이머 취소
만약 setTimeout()으로 계획된 함수의 실행을 취소하고 싶다면, clearTimeout() 메서드를 사용할 수 있어:
JavaScript
// 2초 후에 실행될 함수
function greet() {
console.log('Hello, world!');
}
// 타이머 설정
const timeoutID = setTimeout(greet, 2000);
// 타이머 취소
clearTimeout(timeoutID);
추가 인수가 있는 예:
JavaScript
// 2초 후에 인수와 함께 실행될 함수
function greet(name) {
console.log(`Hello, ${name}!`);
}
// 인수를 전달하며 타이머 설정
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 setInterval 함수
setInterval() 메서드는 함수를 주기적인 간격으로 반복 실행할 수 있게 해줘. 주기적으로 코드를 실행하는 데 유용해.
문법:
const intervalID = setInterval(callback, delay, ...args);
여기서:
callback: 실행될 함수delay: 함수 호출 간의 간격(밀리초)args:callback함수로 전달될 추가 인수들
setInterval 사용 예:
JavaScript
// 2초마다 실행될 함수
function greet() {
console.log('Hello, world!');
}
// 인터벌 설정
const intervalID = setInterval(greet, 2000);
4.4 setInterval 인터벌 취소
반복적인 함수 실행을 중지해야 한다면, clearInterval() 메서드를 사용할 수 있어.
JavaScript
// 2초마다 실행될 함수
function greet() {
console.log('Hello, world!');
}
// 인터벌 설정
const intervalID = setInterval(greet, 2000);
// 10초 후에 인터벌 취소
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval cleared');
}, 10000);
추가 인수가 있는 예:
JavaScript
// 2초마다 인수와 함께 실행될 함수
function greet(name) {
console.log(`Hello, ${name}!`);
}
// 인수를 전달하며 인터벌 설정
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 실용적인 사용 예제
예제 1: 자동으로 시간 업데이트
HTML
<!DOCTYPE html>
<html>
<head>
<title>Auto-update Time</title>
</head>
<body>
<h1>Current Time</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// 매 초마다 시간 업데이트
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
예제 2: 주기적인 데이터 요청
JavaScript
// 데이터를 요청하는 기능을 모방한 함수
function fetchData() {
console.log('Fetching data...');
// 여기서 서버에 실제 요청을 수행할 수 있어
}
// 데이터 요청을 10초마다 실행
const intervalID = setInterval(fetchData, 10000);
// 1분 후 요청 중단
setTimeout(() => {
clearInterval(intervalID);
console.log('Stopped fetching data');
}, 60000);
GO TO FULL VERSION