JavaScript는 웹 페이지에 동적인 요소를 추가하고 사용자와 상호작용하기 위한 매우 강력한 언어입니다. 그 중에서도 자주 사용되는 기능 중 하나가 타이머입니다. 타이머는 일정 시간이 지난 후에 작업을 실행하거나 반복적으로 작업을 실행하는 데 사용됩니다. 이 글에서는 JavaScript를 사용하여 타이머를 설정하고 사용하는 방법에 대해 알아보겠습니다.

setTimeout 함수를 사용한 일회성 타이머

setTimeout 함수는 지정된 시간이 경과한 후에 특정 함수를 한 번 실행하는 데 사용됩니다. 아래는 setTimeout 함수를 사용하여 5초 후에 “안녕하세요!” 메시지를 출력하는 예제 코드입니다.

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

위의 코드에서 setTimeout 함수는 첫 번째 인자로 실행하고자 하는 함수를 받고, 두 번째 인자로 지연 시간을 밀리초 단위로 받습니다. 위의 예제에서는 5000밀리초(5초)로 설정하여 5초 후에 함수가 실행됩니다.

setInterval 함수를 사용한 반복 타이머

setInterval 함수는 지정된 시간 간격마다 특정 함수를 반복적으로 실행하는 데 사용됩니다. 아래는 setInterval 함수를 사용하여 1초 간격으로 숫자를 증가시키는 예제 코드입니다.

let count = 0;
let interval = setInterval(function() {
    count++;
    console.log(count);
}, 1000);

위의 코드에서 setInterval 함수는 첫 번째 인자로 실행하고자 하는 함수를 받고, 두 번째 인자로 간격을 밀리초 단위로 받습니다. 위의 예제에서는 1000밀리초(1초)로 설정하여 1초마다 함수가 실행되어 count 변수의 값을 증가시킵니다. 이렇게 setInterval 함수를 사용하면 주기적인 작업을 수행할 수 있습니다.

타이머 제어하기

타이머가 설정되면 언제든지 취소할 수 있습니다. 이를 통해 원하는 시점에 타이머 실행을 중지하거나 변경할 수 있습니다.

setTimeout 함수와 setInterval 함수는 각각 타이머를 취소하기 위한 함수인 clearTimeout과 clearInterval을 제공합니다. 아래는 setTimeout 함수와 setInterval 함수를 취소하는 예제 코드입니다.

let timeout = setTimeout(function() {
    console.log("이 메시지는 출력되지 않을 것입니다.");
}, 5000);

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

let interval = setInterval(function() {
    console.log("이 메시지는 출력되지 않을 것입니다.");
}, 1000);

clearInterval(interval); // 타이머 취소

위의 코드에서 setTimeout 함수와 setInterval 함수를 사용하여 타이머를 설정하고, clearTimeout과 clearInterval 함수를 사용하여 타이머를 취소합니다. 타이머가 설정된 후에도 언제든지 취소할 수 있으므로 원하는 시점에 타이머를 제어할 수 있습니다.

마무리

JavaScript의 타이머는 웹 페이지에서 시간에 기반한 작업을 수행하기 위한 강력한 도구입니다. setTimeout 함수와 setInterval 함수를 사용하여 타이머를 설정하고 사용할 수 있으며, clearTimeout 함수와 clearInterval 함수를 사용하여 타이머를 취소할 수 있습니다. 이를 통해 웹 페이지의 동적인 기능을 더욱 다양하게 구현할 수 있습니다.

#JavaScript #타이머