[JavaScript 문법] 26일차: 타이머 함수

타이머 함수란?

타이머 함수는 특정 시간 후에 코드를 실행하거나, 일정 간격으로 코드를 반복 실행할 수 있도록 도와주는 함수입니다. JavaScript에서는 setTimeout, setInterval, clearTimeout, clearInterval 네 가지 주요 타이머 함수를 제공합니다.

setTimeout

setTimeout 함수는 지정한 시간 후에 한 번 특정 코드를 실행합니다. 시간은 밀리초 단위로 지정합니다.

 

기본 문법

setTimeout(callback, delay);

예제

function greet() {
  console.log('Hello, World!');
}

setTimeout(greet, 2000); // 2초 후 'Hello, World!' 출력

인라인 함수 사용

setTimeout(() => {
  console.log('Hello, World!');
}, 2000); // 2초 후 'Hello, World!' 출력

clearTimeout

clearTimeout 함수는 setTimeout으로 설정된 타이머를 취소합니다.

기본 문법

clearTimeout(timeoutID);

예제

let timeoutID = setTimeout(() => {
  console.log('This will not be logged');
}, 2000);

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

setInterval

setInterval 함수는 지정한 시간 간격으로 특정 코드를 반복 실행합니다. 시간은 밀리초 단위로 지정합니다.

기본 문법

setInterval(callback, delay);

예제

function greet() {
  console.log('Hello, World!');
}

setInterval(greet, 1000); // 1초마다 'Hello, World!' 출력

인라인 함수 사용

setInterval(() => {
  console.log('Hello, World!');
}, 1000); // 1초마다 'Hello, World!' 출력

clearInterval

clearInterval 함수는 setInterval로 설정된 타이머를 취소합니다.

기본 문법

clearInterval(intervalID);

예제

let intervalID = setInterval(() => {
  console.log('This will not be logged continuously');
}, 1000);

setTimeout(() => {
  clearInterval(intervalID); // 5초 후 타이머 취소
}, 5000);

타이머 함수의 활용 예제

애니메이션 제어

let position = 0;
let box = document.getElementById('box');

function moveBox() {
  position += 1;
  box.style.left = position + 'px';

  if (position < 300) {
    requestAnimationFrame(moveBox);
  }
}

moveBox();

간단한 카운트다운 타이머

let countdown = 10;

let countdownID = setInterval(() => {
  console.log(countdown);
  countdown -= 1;

  if (countdown < 0) {
    clearInterval(countdownID);
    console.log('Countdown complete!');
  }
}, 1000); // 1초마다 카운트다운

타이머 함수의 장점과 단점

장점

1. 비동기 작업: 특정 시간 후에 코드를 실행하거나, 일정 간격으로 코드를 반복 실행할 수 있습니다.
2. 비동기적 코딩: 비동기 작업을 쉽게 처리할 수 있습니다.

단점

1. 정확성 부족: 브라우저의 성능과 로드에 따라 타이머의 정확성이 떨어질 수 있습니다.
2. 복잡성 증가: 타이머를 많이 사용하면 코드의 복잡성이 증가할 수 있습니다.

결론

타이머 함수는 특정 시간 후에 코드를 실행하거나, 일정 간격으로 코드를 반복 실행할 수 있도록 도와주는 유용한 도구입니다. 이번 글에서는 setTimeout, setInterval, clearTimeout, clearInterval 함수의 기본 개념과 사용법, 활용 예제, 장단점에 대해 배웠습니다. 다음 글에서는 이벤트 루프와 태스크 큐에 대해 알아보겠습니다.

다음 글에서 만나요!