[JavaScript 33가지 개념] 10. setTimeout, setInterval, requestAnimationFrame

 

1. setTimeout

const greeting = (name) => {
  console.log(`Hello, ${name}!`);
}

setTimeout(greeting, 2000, "John");
console.log("Waiting for 2 seconds...");

/* 실행 결과
Waiting for 2 seconds...
Hello, John!
*/

setTimout을 사용하는 방법은 위와 같다.

위의 예시에서는 2000밀리초(2초) 지연 후 실행되도록 예약되었기 때문에 console.log가 먼저 실행되고  greeting 함수가 실행된다.

 

2. setInterval

let count = 0;

const increment = () => {
  count += 1;
  console.log(`Count: ${count}`);
};

setInterval(increment, 1000);

/* 실행 결과
Count: 1
Count: 2
Count: 3
...
*/

setInterval을 사용하는 방법은 위와 같다.

위의 예시에서는 1000밀리초(1초) 마다 increment가 동작하면서 count가 1씩 증가하면서 console.log를 실행한다.

setInterval 사용을 권장하지 않는 이유

• setInterval의 한 가지 잠재적인 문제는 항상 지정된 정확한 간격으로 함수를 실행하지 않을 수 있다는 것이다. javascript가 본질적으로 단일 스레드이기 때문에 한 번에 둘 이상의 작업을 수행하지 않는다. 그렇기 때문에 정확한 간격으로 함수를 실행해야 하는 경우 문제가 발생할 수 있다.
• setInterval의 또 다른 문제는 함수 실행을 일시 중지하거나 중지해야 하는 경우 관리하기 어려울 수 있다는 것이다. setInterval은 간격 타이머에 대한 참조를 반환하지만 간격을 지우고 함수 실행을 중지하는 것은 까다로울 수 있다. 특히 간격이 매우 짧은 기간으로 설정된 경우 더욱 그렇다.

 

3. requestAnimationFrame

'requestAnimationFrame'은 다음에 브라우저 창을 다시 그리기 전에 실행할 함수를 예약하는 함수이다.

보다 부드러운 애니메이션을 달성하고 CPU 사용량을 최소화하기 위해 일반적으로 애니메이션 및 시각 효과에 사용된다.

function animate() {
  let element = document.getElementById("box");
  let position = 0;
  
  function move() {
    position++;
    element.style.left = position + "px";
    if (position < 200) {
      requestAnimationFrame(move);
    }
  }
  
  requestAnimationFrame(move);
}

animate();

• 이 예시에서는 animate 함수를 호출하여 상자를 오른쪽으로 이동하는 애니메이션을 시작한다.
• 상자가 특정 위치에 도달할 때까지 requestAnimationFrame을 사용하여 move 함수를 반복적으로 호출한다.
• move 함수 내부에서는 함수가 호출될 때마다 position 변수가 증가하고, box 요소의 left 스타일 속성이 업데이트되어 오른쪽으로 이동한다.
• 'requestAnimationFrame' 함수는 브라우저 창을 다음에 다시 그리기 전에 실행할 '이동' 함수를 예약하는데 사용되며, 보다 부드러운 애니메이션을 달성하는 데 도움이 됩니다.

 

- 참고 자료

https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9

Why not to use setInterval