원문: setTimeout VS setInterval

우선 이 주제에 대해 의견이 분분하다는 것을 말하고 싶다. 그래도 보여주고 싶은 것들은 꽤 많은 사실에 기반한다. 이 문서에 있는 모든 것들은 내 개인적인 경험에 기반한다.

또한 이 문서가 window.requestAnitaionFrame()와 연관되면 안된다는 것을 알아야한다. setTimeout이나 setInterval 대신 window.requestAnitaionFrame을 사용할 수 있는 사용 사례가 있다고 해도, 그것은 DOM 리페인트와 매우 밀접하게 결합되어 있는데, 이상적으로는 초당 60회 발생할 수 있다. 따라서, 어떤 코드가 얼마나 자주 실행되어야하는지에 대한 제어가 어렵다.

며칠 전 내 친구가 나에게 물었다.

타이머에 대해 어떻게 생각해?

솔직히 말하면 나는 그 고통을 즉시 떠올렸다... 이 업계에서 일할 동안, 대부분의 상황을 개인적인 경험과 연관시킬 수 있다는 것이다.

어리고 어리석었던 때에, 내가 싫어하는 한 남자가 나에게 이렇게 말했습니다.

코드를 실행할 타이머를 설정하지 마. 대신 어떤 변화가있을 때 말하고 반응해야하는지 들어야해 (listen)

나는 알겠습니다하고 그 방을 떠났다. 그가 말한 것을 즉시 잊어 버렸다. 내가 그 남자를 좋아하지 않는다는 것을 알기 때문에 ...

나는 여러분들이 타이머 없이 시계를 구현할 수 있다고 생각한다.

타이머는 대부분의 물건들 처럼 남용되고 있다. 어떤 코드 베이스를 볼때, 어떤 프로그맹 언어의 문법이나 제한사항을 보지 않는다. 대신 코드를 작성한 개발자가 어떻게 생각하는하는지 알 수 있다.

다행인 점은 99% 프론트엔드 개발자들이 이미 타이머 보다 더 좋은 것을 알고 있으며, 그것들을 언제 사용해야하는지 알고 있다.

window.onload = () => {  
  // see, here you waited for signal from the browser  
};

interval은 예전에 내가 많이 쓰던 것이었다. 정기적으로 무언가를 해야할 때 마다 setInterval()을 사용하곤 했다. 잘 동작했었다. 이것이 지옥으로 변하기 전까지는...

일단 interval을 설정하면, interval을 지우거나 현재 세션이 끝날때까지 interval은 계속 프로세스로 존재할 것이다.

setInterval은 코드가 정확한 간격으로 콜 스택에 전달될 것을 보장한다. 이는 각 interval 사이의 시간이 항상 동일하다는 것을 의미한다. *

잠깐, 그건 내 코드가 같은 방식으로 실행된다는 뜻인가?

아니. setInterval API는 함수를 콜스택에 제공할 것이다. 함수의 실행은 여러 가지 요인에 달려 있다. 그러나 일반적으로는 항상 약간의 지연이 있을 것이다.

Javascript 앱은 브라우저 내에서 작동한다. 이는 setInterval의 지연이 시간에 따라 증가한다는 것을 의미한다.(또는 단지 변화할 뿐이다). 이러한 동작을 하는 몇가지 이유가 있다.

1. 애플리케이션을 실행하는 장치의 하드웨어 제한
2. 앱이 브라우저의 비활성 탭에서 실행되도록 방치
3. 최적화되지 않은 전체 코드베이스

언급된 모든 것은 아래 이미지에 설명된 상황을 초래할 수 있다.

**dummyMethod1()**의 실행은 알 수 없는 이유로 인해 예상보다 오래 걸렸다. Javascript 이벤트 루프의 특성 때문에 콜스택에 걸렸다(got stuck). 즉, 다른 메소드들은 실행되기 위해서 기다려야 할 것이다...

내가 말했던 거 기억나? "지옥으로 변할 때까지 잘 됐다"고 말했다.

이제 clockTimer 메소드가 우리가 실제로 통제할 수 없는 interval 상에서 3번 실행될 것이다. (더 많이 실행될지도). 이러한 일이 발생되는 이유는 타이머이기 떄문이다. 또한 setInterval은 콜 스택에 무엇을 전달하는지 전혀 알지 못한다. setInterval은 정해진 순간에 콜스택에 전달하는게 끝이다.

이상적인 환경에서 setInterval은 꽤 멋지게 보인다. 하지만 브라우저와 Javascript를 염두한다면 별로 멋지지 않다.

* 이제 여러분은 내가 거기서 무엇을 의미했는지 알 수 있다, (setInterval은 당신의 코드가 정확한 간격으로 콜스택에 전달됨을 보장한다). 실제 코드 실행 시간은 setInterval과 아무 관련이 없다.

재귀(recursion)의 내용과 Javascript에서 구현하는 방법을 모를 경우, 지금이 알아보기에 완벽한 시간이다: 재귀란 무엇인가?

** setTimeout를 사용하는 것은 setInterval을 한번만 호출하는 것과 같다 **

setTimeout을 사용하여 일부 코드의 실행을 다른 시간으로 연기할 수 있다. 하지만 만약 우리가 일정 시간 간격으로 코드를 실행하고 싶다면 어떻게 할까? setInterval부터 시작했는데 이유가 있었다.

이 경우 재귀 setTimeout을 사용하라. 정확한 간격으로 당신의 코드가 실행될 것이라고는 여전히 보장할 수 없다.(내가 setInterval에 대해 글을 쓸때 지적했던과 같은 문제로). 그러나 콜스택에서 동일한 메소드가 여러 번 나오는 시나리오는 절대로 생기지 않는다.

setTimeout과 함께 재귀 작업을 구현하면, 더 좋은 setInterval을 얻을 수 있다.

이 시나리오에서 clockTimer()를 콜 스택에 전달하기 위한 결정은 setTimeout으로 처리되지 않는다. (setInterval의 경우처럼). 대신정반대다. 재귀 setTimeout을 구현한 clockTimer 자체는 다음 함수의 호출을 담당한다. setTimeout은 단지 다음 실행을 지연시키기 위해 존재한다. 따라서 간격(interval)을 생성한다.

그러한 방식으로 우리는 다음 호출 또는 더 잘 말하자면, 콜스택의 다음 실행할 메서드는 현재 메서드의 실행 후에 정확히 1000ms (이 예에서) 수행될 것이라고 확신한다.

재귀 setTimeout을 사용하면 우리의 메서드가 완전히 실행될 때까지, 다른 실행이 발생하지 않는다.

setInterval을 사용할 때는 분명히 일어날 수 있고 아마도 일어날 것이다.

끝으로 나는 이 글이 setInterval이 궁극적으로 나쁜 선택이란 것을 보여주기 위한 것이 아니었다는 점을 지적하고 싶다. 여러분이 알아야 할 것은 setInterval이 어떻게 작동하는지 이해하는 것이고, 이것은 향후 디버깅과 전반적인 의사결정에 도움이 될 것이다.