jquery countdown 싱크문제

Question

안녕하세요.오늘 하루가 몇시간 몇분 몇초 남았는지countdown을 해야해서초기에 서버시간을 받아서 setInterval로 countdown 하고 있습니다.(어느지역에서 봐도 한국시간 기준으로 countdown을 해야합니다)제가 알기로 카운트다운되고 있는 페이지를 냅두고다른 브라우저 탭으로 갔다가 돌아오면 싱크가 점점 안맞는걸로 알고있습니다.실제로 지금도 이런 현상이 발생하고있습니다.테스트는 브라우저에서 하고있고실제 수행될 곳은 앱에서 호출되는 모바일웹입니다.어떻게 해야 사용자가 탭을 옮겼다가 돌아와도 싱크가 맞게 할수있을지방법을 모르겠습니다.조언부탁드립니다.

오후 · Accepted Answer

일단 interval 자체가 지정된 시간마다 동작을 보장하지 않습니다. (setTimeout vs setInterval)브라우저들이 비활성화 상태일때 불필요한 리소스방지 를 위해 우선순위를 낮춥니다.이를해결하기위해서는 웹워커를이용하거나받아온 초기 시간(서버)값을 별도의 변수로 둔후 + 로직실행되면서 변경된시간 기록카운트다운 로직상 위 저장된 시간과 현재 로직동작 시간 차이가 일정이상(2s~00s)일경우 서버에서 새로운 시간을 받아와서 재계산하는 형태로 동작시키면 될거같네요

codezzzz · Answer

https://youtu.be/oWSNOrBbOIU?si=gsVi_lhwTTBboX5- 유튜브에 이런 내용이 있었네요!

shintwl · Answer

https://stackoverflow.com/questions/71007045/setinterval-is-stop-working-when-tab-is-idle-or-working-on-another-tab npm 패키지 설치하라는 내용도 있네요

pjhplayer · Answer

하루에 대한 카운트 다운이닌깐. 당일 24시 - 현재 시간 = 남은 시간을 UI 출력 하는 로직을 setTimeout 또는 setInterval 실행 하면 되지 않을가요? 이렇게 하면 싱크 문제를 신경 안써도 될텐데요.

beatles9 · Answer

답변 주신 분들 감사합니다좀 더 테스트를 해 봐야 하긴 하지만웹 워커로 하니 잘 되는거같습니다.

jquery countdown 싱크문제

5개의 답변

Q&A 목록