▶ JavaScript Browser BOM

JavaScript Timing

JavaScript Timing: 시간 관련 기능과 제어

JavaScript Timing은 웹 애플리케이션에서 특정 작업을 지연시키거나 주기적으로 실행하는 데 필요한 기능을 제공합니다. 이를 통해 개발자는 사용자 인터페이스의 반응성을 향상시키고, 애플리케이션의 동작을 더 효과적으로 제어할 수 있습니다. 이 가이드는 JavaScript에서 시간 관련 메서드를 사용하는 방법에 대해 설명합니다.

1. Timing 기능의 개요

JavaScript에서는 주로 두 가지 메서드를 사용하여 시간 관련 작업을 수행합니다:

setTimeout(): 지정된 시간 후에 코드를 실행합니다.
setInterval(): 지정된 시간 간격으로 코드를 반복 실행합니다.

이 외에도 타이머를 취소하는 기능인 clearTimeout() 및 clearInterval() 메서드가 있습니다.

2. setTimeout()

setTimeout() 메서드는 특정 시간 후에 함수를 실행하는 데 사용됩니다. 이 메서드는 다음과 같은 구문을 가지고 있습니다.

2.1. 기본 구문

setTimeout(function, milliseconds);

function: 실행할 함수.
milliseconds: 대기할 시간(밀리초 단위).

2.2. 사용 예시

console.log('Start');

setTimeout(() => {
    console.log('This message is shown after 2 seconds.');
}, 2000);  // 2000 밀리초 후에 메시지 출력

console.log('End');

이 코드는 "Start"와 "End" 메시지를 즉시 출력한 후, 2초 후에 "This message is shown after 2 seconds." 메시지를 출력합니다.

3. setInterval()

setInterval() 메서드는 지정된 시간 간격으로 함수를 반복 실행하는 데 사용됩니다. 이 메서드는 다음과 같은 구문을 가지고 있습니다.

3.1. 기본 구문

setInterval(function, milliseconds);

3.2. 사용 예시

let count = 0;

const intervalId = setInterval(() => {
    count++;
    console.log(`Count: ${count}`);

    if (count === 5) {
        clearInterval(intervalId);  // 5회 실행 후 타이머 중지
        console.log('Interval cleared.');
    }
}, 1000);  // 1000 밀리초(1초)마다 실행

이 코드는 1초마다 카운트를 증가시키고, 5회 후에 반복을 중지합니다.

4. clearTimeout() 및 clearInterval()

타이머를 취소하고 싶을 때는 clearTimeout() 또는 clearInterval() 메서드를 사용합니다.

4.1. clearTimeout()

clearTimeout() 메서드는 setTimeout으로 설정된 타이머를 취소합니다.

const timeoutId = setTimeout(() => {
    console.log('This will not be shown.');
}, 2000);

clearTimeout(timeoutId);  // 타이머 취소

4.2. clearInterval()

clearInterval() 메서드는 setInterval로 설정된 반복 타이머를 취소합니다.

const intervalId = setInterval(() => {
    console.log('This will not be shown.');
}, 1000);

clearInterval(intervalId);  // 반복 타이머 취소

5. 타이밍 관련 추가 정보

5.1. 정확도

setTimeout과 setInterval은 정확한 타이밍을 보장하지 않습니다. 브라우저의 리소스나 CPU 사용량에 따라 지연이 발생할 수 있습니다. 따라서, 대기 시간 후 즉시 실행되기를 기대하는 경우에 사용할 때 주의해야 합니다.

5.2. 중첩된 타이머

setTimeout 또는 setInterval 내에서 또 다른 setTimeout을 호출하는 경우, 이는 중첩된 타이머를 생성하게 됩니다. 이 경우 관리가 어려워질 수 있으므로, 타이머를 적절하게 취소하는 것이 중요합니다.

6. 요약

JavaScript Timing 기능은 웹 애플리케이션에서 특정 작업을 지연시키거나 반복적으로 실행하는 데 필수적인 도구입니다.

setTimeout(): 지정된 시간 후에 한 번 실행되는 타이머 설정.
setInterval(): 지정된 시간 간격으로 반복적으로 실행되는 타이머 설정.
clearTimeout(): setTimeout으로 설정한 타이머를 취소.
clearInterval(): setInterval로 설정한 반복 타이머를 취소.

이러한 타이머 메서드를 적절히 활용하여 더 나은 사용자 경험과 유연한 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript