JavaScript- 비동기 처리

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

비동기 처리의 개념

작업을 동기적으로 처리한다면 앞의 작업이 끝날때까지 기다리는 동안 다른 작업은 중지상태가 되기 때문에  다른 작업을 할 수 없고 비로소 앞의 작업이 끝나면 다음 작업이 시작되는데

 

비동기 처리는 흐름이 멈추지 않기 때문에 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 

다른 함수도 호출 할수 있다.

 

이것을 아래의 코드를 보고 이해 해보면

function work() {
  const start = Date.now(); // Date.now 함수는 현재시간을 숫자의 형태로 알려주는 자바스크립트 내장 함수
  for (let i = 0; i < 1000000000; i++) {}
  const end = Date.now();
  console.log(end - start + 'ms');
}
 
work();
console.log('다음 작업');

위 work 함수는 1,000,000,000 번 루프를 돌고 이 작업이 얼마나 걸렸는지 알려준다.

 

실행 결과

 

지금은 work() 함수가 호출되면 for 문이 돌아갈 때는 다른 작업은 처리하지 않고 온전히 for 문만 실행하고 있다.

 

만약 이 작업이 진행되는 동안 다른 작업도 하고 싶다면 함수를 비동기 형태로 전환을 해주어야하는데

그렇게 하기 위해서는 아래와 같이 setTimeout 이라는 함수를 사용해주어야한다.

 

function work() {
    setTimeout(() => {
      const start = Date.now();
      for (let i = 0; i < 1000000000; i++) {}
      const end = Date.now();
      console.log(end - start + 'ms');
    }, 0);
}
  
console.log('작업 시작!');
work();
console.log('다음 작업');

setTimeout 함수는 첫번째 파라미터에 넣는 함수를 두번째 파라미터에 넣은 시간(ms 단위)이 흐른 후 호출해주는데 여기서는 두번째 파라미터에 0을 넣었다.

따라서 이 함수는 바로 실행이 된다. 0ms 이후에 실행한다는 의미이지만 실제로는 4ms 이후에 실행이된다.

왜냐하면 브라우저의 최소 실행 시간이 4ms이기 때문이다.

 

 이렇게 setTimeout 을 사용하면 자신이 정한 작업이 백그라운드에서 수행되기 때문에 기존의 코드 흐름을 막지 않고 동시에 다른 작업들을 진행 할 수 있다.

 

실행 결과

 

실행 결과를 보면 작업이 시작 되고 나서, for 루프가 돌아가는 동안 다음 작업도 실행되고 for 루프가 끝나고 나서 몇 ms 걸렸는지 나타나고 있다.

즉 이렇게 for루프가 돌아가는 동안 동시에 다음 작업이라는 문자를 출력하라는 명령이 같이 실행 되는 것이다.