개발 Q&A

제목 자바스크립트(setInterval, setTimeout)로 초시계(카운트다운) 할 때 다른탭으로 이동시 멈추는 문제
글쓴이 터프키드 작성시각 2013/03/21 17:07:28
댓글 : 2 추천 : 0 스크랩 : 0 조회수 : 26763   RSS
안녕하세요, CI포럼 여러분~
근래 일이 많이 바쁘다보니 자주 못들르게 되네요~

혹시 자바스크립트 관련해서 잘 아시는 분이 혹시 있으실까 하고 질문 드릴까 합니다

10.00 초를 카운트다운하는데요
10.00부터 00.01 까지 0.01초 단위로 카운트다운 하는 스크립트를 짰습니다

var intervals = 1000;
function timer() {
    $("#countdown").val(intervals);
    setTimeout(timer, 10); // 0.01초
    intervals--;
    if(intervals >= 0) {
      //아웃
    }
}
setTimeout(timer, 10);

내부에선 초단위랑 밀리초단위를 나누지만 간단하게 1000으로 잡고 0.01초마다 바뀌게 했습니다

근데 문제는,
다른탭으로 잠깐 이동하거나, 최소화 한다음 다시 오면 다른탭으로 이동 했을 때의 시점부터 다시 시작합니다
(브라우저가 자체적으로 제어하는것 같은데..)

더 문제는!!
0.01초가 아닌 1초(1000ms)로 하면 다른탭으로 이동해도 계속 도네요..

그럼 이 문제는 브라우저가
"0.01초 루프는 좀 심하지 않습니까?" 하고 막고
"1초 루프는 괜찮으니 계속 진행하겠습니다" 라고 풀어주는 것일까요?

둘다 안되면, 안되는걸로 알겠는데
어떤것은 되고 어떤것은 안되니.. ㅠㅠ

혹시 이에 관련해서 알고 계시는 분 계신가요?
도움좀 부탁드리겠습니다~

 다음글 검색 관련 해서 질문 드립니다. (2)
 이전글 jquery로 html 코드 받아오기 (1)

댓글

니삼 / 2013/03/22 11:28:54 / 추천 0
 0.01초가 너무 빨라서 브라우저가 제한한다고 추측해봅니다. (999%추측입니다)
우왕아항 / 2013/03/22 16:23:50 / 추천 0
브라우저 제약이 맞습니다. 해당 부분에 대해서는 브라우저 종류, 버전 별로 각각 다르게 돌아가며, 계속해서 바뀌고 있습니다.
본래 브라우저 스크립팅이 1초당 47번 인가의 이벤트만 처리할것으로 약속(사실 약속은 아님. OS 기본값이 저정도 였음)되었으나 개발이 점점 유연해지면서 이를 브라우저 개발사들이 임의로 확장하곤 했습니다.

하지만 이게 문제가 되는 이유는..

1. 논리적으로 개발방법론을 따져보면 보고 있지 않은 어플리케이션의 랜더링 및 이벤트는 최대한 안돌아가야 하는것이 맞습니다.
보고 있지 않는데 돌아가고 있다면 이건 시스템 리소스 낭비입니다.

2. 게다가 자바스크립트라는게 상당히 난해한 언어인데.. 쉽게 쓸수 있게끔 설계되어서 문제가 발생합니다.
자바스크립트는 실행컨텍스트와 스코프의 관계를 정말 제대로 이해하고 있어야 메모리 누수가 없이 개발할 수 있습니다.
특히 타이머와 같이 체인관계가 손쉽게 일어날법한 구조를 아무생각없이 사용하면 ec(임시 처리 메모리 공간)가 삭제되지 않고 무수하게 생겨납니다.

3. 더 있지만 퇴근해야함 -_-; 1~2만으로 정리해보자면
A. 원래 1컴 = 1인터넷 정도로 생각하고 설계 => 이벤트가 전역 백그라운드로 돌아가도 문제없다고 판단.
B. 유연한 개발방법이 늘어나면서 브라우저 개발사에서 처리할 수 있는 이벤트 수를 확장
C. "스크립터"가 아닌 "프로그래머"가 자바스크립트에 관심을 갖기 시작하면서 점점 논리적으로 접근하기 시작. -> 너무 유연해진 개발에서 최소한의 논리를  추구하는 형태로 변경해가는 과정. 약간의 제약을 둠
(해외 자바스크립트 오픈소스를 보시면 "use strict"라고 명시되어있는 js들을 보신적이 있을겁니다. 많은 부분에서 이런 제약들이 도입.)


시작시간, 멈춘시간, 재활성 시간등의 값을 가지고 다시 근사값으로 시뮬레이팅 해주는 형태로 개발해보시는 것도 괜찮은 방법입니다.