JavaScript polling

Device Atlas관련 프로젝트를 진행하면서 오랜만에 UI coding을 하게 되었다. 

OAS API를 맏기 시작하면서 UI 코딩을 하지 않았으니, 근 10년간 UI 코드를 보지 않았던 것이다.

그 사이에 Ajax -> jQuery -> Angular -> Angular 2, React Js 등으로 UI기술은 발전하고,

TypeScript니 하는 것들이 생겨나 버렸다.

다행히 이번에 하는 프로젝트는 내부 시스템이고 해서 

기존에  Angular JS로 팀장이 만든 Project에 페이지 두개 정도를 넣는 걸로 진행하게 되었다.

나름 Angular 인터넷 찾아가보면서 재밌고 진행해 보았는데 

두가지 issue가 발생하는 것이다.

1. 데이터 가져오는 Controller method가 꼭 두번 실행이 된다.

2. 화면을 Refresh하기 위해서 SetTimeout 메소드를 사용했는데, 이상하게 Refresh가 timeout에 상관 없이 바로 되는 것이다.

나는 JS에 routing을 설정하면서 template와 controller를 설정하였는데 

html내에서 다시 ng-controller를 사용하니 controller가 두번 호출 되는 문제 였다.

이건 ng-controller를 html에서 삭제하니 바로 해결이 되었다.

근데 두번째는 도무지 해결책이 나지 않는다.

이렇게 저렇게 해보다가 한번 구글링을 했더니 아래 Q/A가 보인다.

http://stackoverflow.com/questions/4120781/settimeout-ignores-timeout-fires-immediately

setTimeout의 첫번쨰 파라미터에 함수를 설정할 때  () 를 넣으면 해당 함수가 바로 호출된다는 얘기다. -.-

대체 왜 이렇게 해 놓았는지 이해 가지 않지만 어쨋든 ()를 뺴고 해당 함수의 파라미터를 세 번째 변수로 바꾸었더니 바로 해결된다.

setTimeout( getData(id), 20000 ) ->

setTimeout( getData, 20000, id)

오랜만에 UI코드를 해보니 나름 재밌기도 하고 한게 

함 개인 프로젝트를 한 번 해볼까 하는 생각도 든다.