비동기 처리-1

1. 비동기 처리란?

2. setTimeout

 

1. 비동기 처리란?

비동기 처리란 처리할 일을 병렬적으로 처리하는 것을 의미한다.

 

출처: https://learnjs.vlpt.us/async/

위 그림의 1,2,3,4는 처리할 일을 의미한다. 여기서 동기적으로 일을 처리할 때는 1부터 하나씩 처리하기 때문에 시간이 오래걸리는 반면 비동기적으로 처리를 할 때는 비교적 짧은 시간에 완료된다.

 

 

그렇기 때문에 자바스크립트에서 비동기 처리는 중요한 요소이다. 이유는 자바스크립트는 주로 사용자와의 상호작용을 하는 부분에서 많이 사용되기 때문이다. 사용자의 여러 요구를 하나씩 처리하는 경우 각각의 처리할 작업이 간단한 경우 상관없을 지라도 한 작업이라도 오래걸리는 순간 그 작업 뒤에있는 작업까지도 영향을 받는다.

 

그렇기 때문에 처리할 작업이 시간이 오래걸린다고 생각이 들면 비동기적으로 처리할 것을 고민해봐야한다.

 

2. setTimeout

자바스크립트에서 비동기 처리를 위한 함수로 setTimeout이 있다. setTimeout은 함수로서 첫 번째 인자로는 처리할 작업 즉, 함수를 받고 두 번째 인자로는 언제 작업을 할지 정하는 숫자가 들어간다.

 

출처:https://dev.to/divyajyotiuk/settimeout-any-drawback-47ed

 

바로한번 예시를 보자

 

위의 코드의 실행 결과는 a c b이다.

 

먼저 맨위의 a를 찍고 setTimeout함수가 실행되는데 이때 1000ms뒤에 실행되기때문에 마지막의 console.log('c')가 먼저 처리된다.

 

자 여기서 아주 중요한것이 있다. 바로 두 번째인자인 숫자에 관련된 것인데 많은 사람들이 이 숫자에 정확히 첫 번째 인자로 받은 함수를 실행한다고 생각을 하는데 이건 틀렸다.

 

엄밀히 말하면 최소한 특정 시간 이후에 실행을 하는것이 정확하다.

 

자 위의 코드를 보자 먼저 work의 setTimeout의 시간을 1000ms로 정했다 만약 잘못알고 있는 것처럼  1000에 정확히 실행이라면 work1의 결과는 '1000만에 work1 완료'라고 나오는 것이 정확하다. 하지만 결과는 그렇지 않다.

 

위 코드를 보면 먼저 work1을 실행한다. 그리고 바로 work2를 실행하는데 이때 work2안의 for문은 굉장히 오래 걸리는 작업이다. 그렇기 때문에 work2의 실행을 기다리다 work1의 결과가 늦어진것이다.

 

아직 이해가 안간다면 자바스크립트의 실행 과정을 한번보자.

 

자바스크립트는 call stack, web api, callback queue라는 구조가 있는데.

 

우선 call stack은 실행할 함수들을 저장한 스택으로서 스택에 있는 함수들이 순차적으로 실행이 된다.

 

다음으로 web api는 우리가 자바스크립트를 사용할때 브라우져가 처리할 일들을 처리한다. 간단한 예가 setTimeout의 타이머 역할이다. setTimeout의 용도를 보다싶이 타이머가 필요한데 이 타이머 역할을 web api가 해준다.

 

callback queue는 web api의 결과가 들어간다. 이 callback queue의 내용은 call stack이 텅텅 비었을때 들어간다.

 

다시 코드를 보면 work1의 setTimeout때문에 web api의 타이머는 1000ms를 기다린뒤 실행할 함수(setTimeout의 첫 번째 인자)를 callback queue로 보낸다. 그사이 work2함수는 call statck에서 실행이 되는 것이다.

 

즉, call statck에서 실행되고있는 work2함수가 오래 걸리기에 callback queue에 있는 work1함수가  9737ms이라는 시간이 걸린 것이다.

 

마지막으로 정히하면 setTimeout의 시간의 의미는 '이 시간뒤에 callback queue로 보내라'가 정확하다.