본문 바로가기
JavaScript 문법 시리즈

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

by cogito21_js 2024. 8. 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 함수의 기본 개념과 사용법, 활용 예제, 장단점에 대해 배웠습니다. 다음 글에서는 이벤트 루프와 태스크 큐에 대해 알아보겠습니다.

다음 글에서 만나요!

 

반응형