비동기 처리의 이해
비동기 처리는 특정 코드의 실행 완료를 기다리지 않고 다음 코드를 바로 실행하는 JavaScript의 처리 방식입니다. setTimeout과 setInterval은 JavaScript에서 비동기적으로 시간 지연과 반복 작업을 처리할 수 있는 두 가지 기본적인 함수입니다.
setTimeout
setTimeout 함수는 지정된 시간이 지난 후에 함수를 한 번 실행합니다. 이 함수는 비동기 작업에 유용하게 사용됩니다.
기본 구조
setTimeout(function, delay);
- function: 지연 후 실행할 함수
- delay: 밀리초 단위의 지연 시간 (1000 밀리초 = 1초)
예제 1: 간단한 메시지 출력
setTimeout(function() {
console.log("This message is shown after 3 seconds.");
}, 3000);
이 예제에서는 3000 밀리초(3초) 후에 콘솔에 메시지를 출력합니다.
setInterval
setInterval 함수는 지정된 시간 간격마다 함수를 반복적으로 실행합니다. 이 함수는 주기적인 업데이트가 필요할 때 사용됩니다.
기본 구조
setInterval(function, interval);
- function: 주기적으로 실행할 함수
- interval: 실행 간격을 나타내는 밀리초 단위의 시간
예제 2: 주기적인 시간 출력
setInterval(function() {
console.log("Current time: " + new Date().toLocaleTimeString());
}, 1000);
이 예제에서는 매초마다 현재 시간을 콘솔에 출력합니다.
예제 3: 타이머 구현
setTimeout과 setInterval을 사용하여 간단한 타이머를 구현할 수 있습니다. 사용자가 지정한 시간 후에 알림을 주는 타이머를 만들어보겠습니다.
function startTimer(duration) {
let remaining = duration;
const timerInterval = setInterval(function() {
remaining--;
console.log(remaining + " seconds remaining");
if (remaining <= 0) {
clearInterval(timerInterval);
console.log("Timer is done!");
}
}, 1000);
}
startTimer(5); // 5초간 동작하는 타이머
이 코드는 startTimer 함수를 정의하여, 호출할 때 지정된 시간(초 단위) 동안 매초마다 남은 시간을 출력하고, 시간이 끝나면 "Timer is done!"을 출력하고 타이머를 중지합니다.
위 예제들에서 setTimeout과 setInterval은 JavaScript에서의 비동기 처리 방법을 보여줍니다. 이들 함수를 통해 시간에 따라 코드 실행을 제어할 수 있으며, 사용자 인터페이스를 동적으로 만들거나, 데이터를 주기적으로 업데이트하는 등 다양한 상황에서 유용하게 사용됩니다.
이번 주 강의에서 배운 setTimeout과 setInterval을 통해 간단하게 시간 기반의 작업을 스케줄링하는 방법을 이해하고 적용할 수 있게 되었습니다. 다음 강의에서는 JavaScript의 Promise와 async/await를 이용한 더 고급 비동기 처리 방법을 배울 예정입니다.
'프로그래밍 > Node.js & JavaScript' 카테고리의 다른 글
처음 배우는 JavaScript 강의. 5주차: 비동기 처리 (3) async 함수와 await 키워드 (0) | 2024.05.15 |
---|---|
처음 배우는 JavaScript 강의. 5주차: 비동기 처리 (2) Promise 기본 사용법 (2) | 2024.05.11 |
처음 배우는 JavaScript 강의. 4주차: DOM 조작과 이벤트 (3) 이벤트 리스너 추가와 이벤트 핸들링 (1) | 2024.05.03 |
처음 배우는 JavaScript 강의. 4주차: DOM 조작과 이벤트 (2) 요소 선택, 생성, 수정 (1) | 2024.05.03 |
처음 배우는 JavaScript 강의. 4주차: DOM 조작과 이벤트 (1) DOM (Document Object Model) 기본 (3) | 2024.04.30 |