자바스크립트에서 타이머를 사용하면 특정 시간 후에 코드를 실행하거나 주기적으로 코드를 실행할 수 있습니다. 타이머를 사용하면 사이트의 사용자 경험을 향상시키거나 작업을 예약하는 데 도움이 됩니다. 이번 포스트에서는 자바스크립트에서 타이머를 사용하는 방법을 알아보겠습니다.

setTimeout 함수

setTimeout 함수는 특정 시간 후에 코드를 실행하고자 할 때 사용됩니다. 예를 들어, 3초 후에 메시지를 출력하고 싶을 경우 다음과 같이 코드를 작성할 수 있습니다.

setTimeout(() => {
  console.log("안녕하세요!");
}, 3000);

이 코드는 3초 후에 “안녕하세요!” 라는 메시지를 콘솔에 출력합니다. setTimeout 함수의 첫 번째 인자로는 실행할 코드를 포함하는 콜백 함수를 전달하고, 두 번째 인자로는 지연 시간(ms)을 전달합니다.

setInterval 함수

setInterval 함수는 일정한 주기로 코드를 실행하고자 할 때 사용됩니다. 예를 들어, 1초마다 현재 시간을 출력하고 싶을 경우 다음과 같이 코드를 작성할 수 있습니다.

setInterval(() => {
  const now = new Date();
  console.log(`현재 시간은 ${now.toLocaleString()} 입니다.`);
}, 1000);

이 코드는 1초마다 현재 시간을 콘솔에 출력합니다. setInterval 함수의 첫 번째 인자로는 실행할 코드를 포함하는 콜백 함수를 전달하고, 두 번째 인자로는 주기(ms)를 전달합니다.

clearTimeout과 clearInterval 함수

setTimeout이나 setInterval을 사용하여 생성한 타이머를 취소하고 싶을 때는 clearTimeout과 clearInterval 함수를 사용할 수 있습니다. 이 함수들은 각각 setTimeout과 setInterval 함수의 반환값인 타이머 식별자를 전달하여 해당 타이머를 취소합니다.

const timer1 = setTimeout(() => {
  console.log("이 메시지는 출력되지 않습니다.");
}, 5000);

const timer2 = setInterval(() => {
  console.log("이 메시지는 주기적으로 출력됩니다.");
}, 1000);

clearTimeout(timer1);
clearInterval(timer2);

위의 코드는 setTimeout과 setInterval 함수를 사용하여 생성한 타이머를 모두 취소합니다.

마치며

자바스크립트 타이머를 사용하면 특정 시간 후에 코드를 실행하거나 주기적으로 코드를 실행할 수 있습니다. 이를 활용하여 동적인 웹 사이트를 만들거나 작업을 예약할 수 있습니다. 잘 활용하면 사용자 경험을 향상시키는데 큰 도움이 될 것입니다.

#javascript #타이머