자바스크립트 Setinterval이 동작하지 않는 이유

문제상황

'홍길동' 개발자가 Setinterval을 이용하여 현재 시간을 표시해주는 자바스크립트 어플리케이션을 개발했습니다.

현재 시간을 표시하기 위해서 1초마다 함수가 동작하도록 작성하였죠

해당 화면을 계속 유심히 지켜보고 있으면 정상적으로 동작합니다.

그러나 브라우저에서 다른탭을 누르거나 브라우저를 최소화하게 되면 해당 스크립트가 실행이 되지 않은 것인지 혹은 문제가 있는 것인지? 시간이 약간씩 밀리거나 시간이 한번에 쭉 올라간다거나의 현상이 있는거죠

문제원인

문제의 원인은 브라우저마다 쓰로틀을 해결하는 방법이 바로 보이지 않는 화면에서는 타이머 함수를 동작하지 않거나 지연시키는 방법을 사용합니다.

이것은 브라우저마다 상이합니다.

해결방안

해결방안은 간단합니다.

setInterval을 실행하는 쓰레드가 JS의 메인쓰래드가 아닌 서브쓰레드에서 실행하면 되는데

그것을 구현하기 위해서는 HTML5의 WebWorker로 구현하시면 됩니다.