반응형
타이머 함수란?
타이머 함수는 특정 시간 후에 코드를 실행하거나, 일정 간격으로 코드를 반복 실행할 수 있도록 도와주는 함수입니다. JavaScript에서는 setTimeout
, setInterval
, clearTimeout
, clearInterval
네 가지 주요 타이머 함수를 제공합니다.
setTimeout
setTimeout
함수는 지정한 시간 후에 한 번 특정 코드를 실행합니다. 시간은 밀리초 단위로 지정합니다.
기본 문법
setTimeout(callback, delay);
예제
function greet() {
console.log('Hello, World!');
}
setTimeout(greet, 2000); // 2초 후 'Hello, World!' 출력
인라인 함수 사용
setTimeout(() => {
console.log('Hello, World!');
}, 2000); // 2초 후 'Hello, World!' 출력
clearTimeout
clearTimeout
함수는 setTimeout
으로 설정된 타이머를 취소합니다.
기본 문법
clearTimeout(timeoutID);
예제
let timeoutID = setTimeout(() => {
console.log('This will not be logged');
}, 2000);
clearTimeout(timeoutID); // 타이머 취소
setInterval
setInterval
함수는 지정한 시간 간격으로 특정 코드를 반복 실행합니다. 시간은 밀리초 단위로 지정합니다.
기본 문법
setInterval(callback, delay);
예제
function greet() {
console.log('Hello, World!');
}
setInterval(greet, 1000); // 1초마다 'Hello, World!' 출력
인라인 함수 사용
setInterval(() => {
console.log('Hello, World!');
}, 1000); // 1초마다 'Hello, World!' 출력
clearInterval
clearInterval
함수는 setInterval
로 설정된 타이머를 취소합니다.
기본 문법
clearInterval(intervalID);
예제
let intervalID = setInterval(() => {
console.log('This will not be logged continuously');
}, 1000);
setTimeout(() => {
clearInterval(intervalID); // 5초 후 타이머 취소
}, 5000);
타이머 함수의 활용 예제
애니메이션 제어
let position = 0;
let box = document.getElementById('box');
function moveBox() {
position += 1;
box.style.left = position + 'px';
if (position < 300) {
requestAnimationFrame(moveBox);
}
}
moveBox();
간단한 카운트다운 타이머
let countdown = 10;
let countdownID = setInterval(() => {
console.log(countdown);
countdown -= 1;
if (countdown < 0) {
clearInterval(countdownID);
console.log('Countdown complete!');
}
}, 1000); // 1초마다 카운트다운
타이머 함수의 장점과 단점
장점
- 비동기 작업: 특정 시간 후에 코드를 실행하거나, 일정 간격으로 코드를 반복 실행할 수 있습니다.
- 비동기적 코딩: 비동기 작업을 쉽게 처리할 수 있습니다.
단점
- 정확성 부족: 브라우저의 성능과 로드에 따라 타이머의 정확성이 떨어질 수 있습니다.
- 복잡성 증가: 타이머를 많이 사용하면 코드의 복잡성이 증가할 수 있습니다.
결론
타이머 함수는 특정 시간 후에 코드를 실행하거나, 일정 간격으로 코드를 반복 실행할 수 있도록 도와주는 유용한 도구입니다. 이번 글에서는 setTimeout
, setInterval
, clearTimeout
, clearInterval
함수의 기본 개념과 사용법, 활용 예제, 장단점에 대해 배웠습니다. 다음 글에서는 이벤트 루프와 태스크 큐에 대해 알아보겠습니다.
다음 글에서 만나요!
반응형
'JavaScript 문법 시리즈' 카테고리의 다른 글
[JavaScript 문법] 28일차: AJAX와 Fetch API (0) | 2024.08.28 |
---|---|
[JavaScript 문법] 27일차: 이벤트 루프와 태스크 큐 (0) | 2024.08.27 |
[JavaScript 문법] 25일차: async/await (0) | 2024.08.25 |
[JavaScript 문법] 24일차: 프로미스 고급 (0) | 2024.08.24 |
[JavaScript 문법] 23일차: 프로미스 기초 (0) | 2024.08.23 |