비슷해 보이는- setTimeout , setInterval, requestAnimationFrame

setTimeout - 설정한 시간이 지나면 특정 기능을 수행한다.

let counter = 0;

setTimeout(() => {
	console.log('setTimeout',counter++);
},3000);
//3초 뒤에 콜백함수를 '한 번' 실행한다.

setInterval과 같은 방식으로 실행을 취소 시킬 수 있다.

---

setInterval - 설정한 시간을 기준으로 특정 기능을 반복한다.

let counter = 0;
let repeater = setInterval(() => {
	console.log('setInterval',counter++);
    },500); //0.5초 간격으로 콜백함수를 반복 실행한다.
    
setTimeout(() => {
	console.log('Clear'); 
	clearInterval(repeater); //반복 멈춤 
    },5000); //5초뒤에 실행된다.

 

requestAnimationFrame - 특정 애니메이션을 반복 수행해야 할 때, 컴퓨터에 무리가지 않도록 컴퓨터가 애니메이션을 수행할 준비가 될 때까지 기다렸다가 수행되도록 한다. (캔버스 사용시 자주 쓰인다.)

※MDN의 설명 => 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 

   const canvas = document.querySelector('.canvas');
      const context = canvas.getContext('2d');
      let xPos = 10;
      let timerId;

      function draw() { //x축으로 10씩 이동시키는 애니메이션
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(xPos, 150, 10, 0, Math.PI*2, false);
        context.fill();
        xPos += 10;
        timerId = requestAnimationFrame(draw);
      }

      draw();

      canvas.addEventListener('click', () => {
        cancelAnimationFrame(timerId); // 클릭하면 멈추도록
      });

 

See the Pen rNxwzmG by volt-nuna (@ddonni0426) on CodePen.