Categories: JavaScript

JavaScript 자바스크립트 setTimeout 과 setInterval 사용법

javascript

setTimeout 과 setInterval 란?

setTimeout과 setInterval은 자바스크립트에서 시간 지연 및 주기적인 작업을 수행하는 데 사용되는 함수입니다.

setTimeout

setTimeout은 자바스크립트에서 비동기적인 코드 실행을 위해 사용되는 함수로, 특정 시간이 경과한 후에 함수를 실행합니다. 이 함수는 웹 애플리케이션에서 일정한 지연을 주거나, 특정 조건이 충족되었을 때 코드를 실행하는 데 주로 활용됩니다.

setTimeout 구조

JavaScript

setTimeout(function, delay);

JavaScript

function: 지연 후 실행될 함수
delay: 실행을 지연시킬 시간 (밀리초 단위)

예제

JavaScript

function greet() {
  console.log("안녕하세요!");
}

// 3초 후에 greet 함수 실행
setTimeout(greet, 3000);

JavaScript

위 예제에서 setTimeout 함수는 greet 함수를 3초 후에 실행합니다.

setTimeout은 특히 어떤 동작을 지연시켜야 할 때 유용합니다. 예를 들어, 웹 페이지가 로드된 후 일정 시간이 지난 후에 팝업을 표시하거나, 사용자가 어떤 동작을 한 후에 일정 시간이 지난 후에 특정 작업을 실행하는 경우에 활용할 수 있습니다.

비동기 실행

setTimeout은 비동기적으로 동작합니다. 즉, 지정된 시간이 경과하면 해당 함수가 호출되지만, 코드의 실행이 일시 중단 되지 않고 다음 코드가 계속해서 실행됩니다.

주의사항

setTimeout은 정해진 정확한 시간에 코드가 실행되지 않을 수 있습니다. 브라우저나 실행 환경의 현재 상태에 따라 다소 차이가 있을 수 있습니다.
setTimeout을 사용할 때에는 적절한 에러 처리를 포함하여 안정적으로 코드를 작성하는 것이 좋습니다.

setInterval

setInterval은 자바스크립트에서 특정 시간 간격마다 주기적으로 함수를 실행하는 데 사용되는 함수입니다. 이 함수는 반복적인 작업이 필요한 상황에서 유용하게 활용됩니다.

setInterval 구조

JavaScript

setInterval(function, interval);

JavaScript

function: 주기적으로 실행될 함수
interval: 실행 간격 (밀리초 단위)

예제

JavaScript

function printTime() {
  console.log(new Date());
}

// 1초 간격으로 printTime 함수 실행
setInterval(printTime, 1000);

JavaScript

위 예제에서 setInterval 함수는 1초 간격으로 printTime 함수를 실행합니다.

setInterval은 특히 실시간 정보를 표시하거나 주기적으로 업데이트해야 하는 상황에서 유용합니다.

비동기 실행

setInterval 역시 비동기적으로 동작합니다. 정해진 간격마다 함수를 호출하면서도 코드의 실행이 일시 중단되지 않고 계속 진행됩니다. 이는 실시간 업데이트나 반복적인 작업을 구현할 때 효과적입니다.

clearInterval을 통한 중지

setInterval을 시작한 후에는 필요에 따라 중지할 수 있습니다. 이를 위해 clearInterval 함수를 사용합니다. setInterval 함수는 해당 함수가 실행되는 간격마다 고유한 식별자를 반환하고, 이를 clearInterval 함수에 전달하여 주기적인 실행을 중지시킬 수 있습니다.

JavaScript

// setInterval 시작
var intervalId = setInterval(printTime, 1000);

// 일정 시간 후에 clearInterval을 사용하여 중지
setTimeout(function() {
  clearInterval(intervalId);
}, 5000);

JavaScript

주의사항

setInterval의 실행 간격은 정확하게 유지되지 않을 수 있습니다. 환경에 따라 다소 차이가 있을 수 있습니다.
반복적인 작업이 불필요한 경우, 무한 루프와 같은 문제를 방지하기 위해 적절한 조건을 확인하여 중지하는 것이 중요합니다.

결론

자바스크립트에서 자주 사용되는 setTimeout과 setInterval 함수에 대해 알아보았습니다.

setTimeout은 특정 시간이 경과한 후에 한 번만 코드를 실행하는 데 사용되며, 비동기적인 코드 실행을 통해 웹 애플리케이션에서 일정한 지연을 주거나 특정 조건이 충족되었을 때 코드를 실행하는 데에 활용됩니다. 주의해야 할 점으로는 정확한 실행 시간이 보장되지 않을 수 있으며, 적절한 에러 처리가 필요합니다.

반면에 setInterval은 특정 시간 간격마다 주기적으로 코드를 실행하는 데에 사용됩니다. 이는 실시간 정보를 표시하거나 주기적으로 업데이트해야 하는 상황에서 유용하며, 비동기적으로 동작하여 코드의 실행이 일시 중단되지 않습니다. clearInterval을 사용하여 중지할 수 있어 필요에 따라 주기적인 실행을 제어할 수 있습니다.

자바스크립트의 이러한 시간 관련 함수들은 다양한 기능을 수행할 수 있으므로, 상황에 맞게 적절히 활용하는 것이 중요합니다.

suover