처음 배우는 JavaScript 강의. 5주차: 비동기 처리 (1) setTimeout과 setInterval

비동기 처리의 이해

비동기 처리는 특정 코드의 실행 완료를 기다리지 않고 다음 코드를 바로 실행하는 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를 이용한 더 고급 비동기 처리 방법을 배울 예정입니다.