Javascript Single Thead or Asynchronous





Javascript Single Thead or Asynchronous




1. JS 언어는 Single Thread 방식이며, 모든 비동기 이벤트(Event Callback,  타이머(setTimeout, setInterval)는 같은 Thread 위에서 실행된다.



2. JS 언어는 Event Loop 방식이며, 비동기 이벤트를 사용한다.(여기서 Event Loop라는 것은 동작을 요청 후 "CallBack"을 지정하여 동작이 완료되면 콜백이 실행되는 방식을 말한다.(비동기 동작 방식))






3. 모든 비동기 이벤트는 완료 시점의 순서를 보장하지 않는다.


즉, "실행"은 순서를 보장하지만, 그에 따른 완료(callback) 시점은 보장하지 않는다.(어떤 것이 먼저 종료될지 전혀 알 수 없다.)


4. 비동기 이벤트가 "실행" 되는 시점호출되는 시점이 아닌 호출되는 코드가 포함된 Javascript Code Block이 완료된 시점이다.



관련 예제 코드:


(function(){
	console.log('for start time:' + new Date().getSeconds());
	
	for (var i = 0; i < 100000; i++){
		console.log();
	}
	
	console.log('for end time:' + new Date().getSeconds());
	
	// 비동기 이벤트인 serTimeout 실행 시점은 위 순회문 종료 후 3초뒤 실행된다.
	this.setTimeout(function(){
		console.log('setTimeout start time:' + new Date().getSeconds());
	}, 3000)
})();


위 코드 중 비동기 이벤트인 setTimeout(큐에 저장된)의 실행 시점은 해당 Javascript Code Block 안의 for(순회)문 종료 후 3초뒤 실행된다.



4. setInterval 실행 코드가 이미 큐에 이미 들어가있다면, 그 다음 간격(Interval Time)으로 실행되어야 할 코드는 에 쌓이지 않고 Drop된다.(즉, 최초 Interval Timer만 큐에 쌓인다.)



5. 브라우저에 따라 차이가 존재하지만 Timer에 전달하는 최소 시간은 10ms ~ 15ms로 지정하는것이 좋다.(하위 호환성을 위해)











- 위 그림은 JS의 비동기 이벤트 실행 순서를 나타내고 있다.(Javascript Code Block --> Click Event --> Timer)





구현 코드 블럭:








- "테스트 결과" 비동기 이벤트 실행 및 완료 시점은 아래와 같습니다.



 실행: javascript code block --> onload code block --> setTimeout code block --> setTimeout code block --> setInterval code block --> setInterval code block



완료: javascript code block --> onclick code block --> setTimeout code block(무작위) --> setTimeout code block(무작위) --> setInterval code block(무작위) --> setInterval code block(무작위)





동기 / 비동기

http://kineo2k.tistory.com/29


Javascript 비동기 프로그래밍:

http://blog.naver.com/PostList.nhn?from=postList&blogId=bitofsky&categoryNo=54&currentPage=1


Javascript Timer:

http://okjungsoo.tistory.com/7954014


How Javascript Timer Work:

http://webmeme.tistory.com/entry/How-Javascript-Timer-Work