기본 콘텐츠로 건너뛰기

자바스크립트 타이머, 애니메이션, setTimeout, setInterval, requestAnimationFrame - javascript

이미지
작성자:

자바스크립트에서 일정 시간 후, 또는 일정 시간마다 어떠한 동작을 실행시킬 때 사용하는 함수, setTimeout, setInterval, requestAnimationFrame

자바스크립트에는 timer 함수가 3가지 있다.

  • setInterval
  • setTimeout
  • requestAnimationFrame

setInterval

시간을 지정해서 매 시간마다 함수를 실행한다.

다른 함수가 먼저 실행되면 기다렸다가 실행하기 때문에 정해진 시간에 실행되지 않을 수 있다.

위와 같은 문제로 일반적으로 애니메이션을 만들 땐 잘 사용하지 않는다.

let interval_no = 0; // 제어용

let sampleInterval = setInterval(() => {
  console.log("time : ", new Date());
  interval_no += 1; // interval마다 1 증가
  
  // interval_no 가 5보다 크거나 같으면
  if (interval_no >= 5 ){
    clearInterval(sampleInterval); // 중지
  }
}, 500); // 0.5초마다 실행

setTimeout

지정된 시간이 지난 후 한 번만 실행한다.

setInterval과 같은 문제점이 있다.

timeout 할 때 다시 호출하는 식으로 제어할 수 있다.

let timeout_no = 0; // 제어용
let timerId = null; // setTimeout ID용

sampleTimeout = () => {
  setTimeout(() => {
    console.log("time : ", new Date());
    timeout_no += 1; // 0.5초 후 1 증가
    
    // timeout_no가 50보다 작거나 같으면
    if (timeout_no <= 50) {
      sampleTimeout(); // setTimeout 다시 실행
    }
  }, 500); // 0.5초 후 한 번 실행
}

// setTimeout 실행
sampleTimeout();
// 중간에 멈추려면 clearTimeout(timerId); 를 사용하면 된다.

requestAnimationFrame

setInterval, setTimeout과 달리 자바스크립트가 실행중이라고 멈춰서 대기하지 않고 독자적으로 실행된다.

연속적으로 requestAnimationFrame을 통해 함수를 계속 실행한다.

canvas나 svg 또는 tag를 이용한 slide효과, fadein / fadeout 등의 애니메이션 처리를 할 때 유용하게 사용된다.

let start_timer = null; // 시간 확인용
let raf = null; // requestAnimationFrame ID용
let num = 0; // 제어용

raframe = (timestamp) => {
  // 경과 시간 확인용 timestamp
  if (!start_timer) start_timer = timestamp;
  let timer = timestamp - start_timer;

  // timer가 9초 이하면(1000 = 1초)
  if (timer < 9000) {
    console.log("timer : ", timer);
    
    // requestAnimationFrame 실행, ID 적용
    raf = window.requestAnimationFrame(raframe);
  } else {
    // 
  }
}

// requestAnimationFrame 실행
window.requestAnimationFrame(raframe);
// 중간에 멈추려면 cancelAnimationFrame(raf); 사용하면 된다.

간단하게 사용하기에는 setTimeout이 편하지만, 조금이라도 퍼포먼스를 높이려면 의식적으로 requestAnimationFrame을 사용하는게 좀 더 나을 것 같다.

requestAnimationFrame대신 css3의 transition을 이용하면 좀 더 간단하게(대신 그만큼 조금 더 단순한) 애니메이션과 타이머를 만들 수 있다.


끝.



분류 :