비동기 차트 그리기

비동기 차트 그리기

다들 js(javascript)하면 비동기처리한다는 것을 알고 있을거라고 생가합니다.

그래서 Node.js를 사용한 웹서버를 만드는 이유가 있겟죠.

그런데 말입니다.

for문 안에 있는 함수 호출의 경우는 동기적으로 호출되더군요.

기본적인 동작은 위와 같습니다.

showChart()함수는 i개의 div에 각각 차트를 출력하는 함수입니다.

그냥 loop가 돌면서 각각 실행 시키고 끝낼 것이라고 생각했습니다.

그런데 그렇데 되지 않더군요.

위 코드를 실행해면 다음과 같이 for문의 수행 속도가 나옵니다.

반올림 하면 1초정도 되겠네요.

시간이 생각보다 많이 걸립니다.

31개의 chart갱신이니까요.

그러나 문제는 이러면 화면이 멈칫 멈칫 하는 현상이 발생됩니다.

사용자들은 문제가 있다고 인식하게 되죠.

그럼 비동기로 함수 호출을 해보도록 하죠.

비동기로 호출 하는 방법은 setTimeout()을 이용하는 방법입니다.

js에서는 비동기로 동작하는 몇몇 함수들이 존재합니다.

setInterval()이 대표적이죠. 여기서는 setTimeout()을이용하여 일정시간 후 함수를 동작하도록 등록해놓겠습니다.

어라? 위와 같이 에러가 나네요.

네 비동기로 호출은 하지만 for문이 먼저 돌아버려서 i의 값이 32가 되어 호출하게 되서 문제가 발생되었습니다.

여기서만 봐도 비동기적으로 함수를 호출한다는 것을 알 수 있죠.

하나씩 호출하는 것이 아닌 

"나중에 돌려! 난 다음 꺼 수행할 께."

하고 가버리는 것이죠.

여기서 setTimeout()의 실행 시간을 10 = 0.01초로 설정해서 0.01초 후에 실행하라고 하고 

for문을 계속 돌렸기 때문에 실행되기전 for문이 끝나 i의 값이 32가 되었습니다.

그럼 어떻게 해야 setTimeout()에 전달할 변수(parameter)를 고정시킬 수 있을까요?

(function(내부에서 쓸 파라미터){ 함수 내부}(전달할 파라미터))

을 이용합니다.

위 코드는 방금 내용을 적용시켰습니다.

그리고 다음은 for문의 수행시간입니다.

이전보다 많이 빨라졌죠?

이렇게 하면 화면상에서 멈칫 멈칫하는 현상을 해결할 수 있습니다.