[JavaScript] 비동기 처리(콜백함수)

만약 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지상태가 되기 때문에 다른 작업을 할 수 없다.

하지만 비동기적으로 처리를 한다면 흐름이 멈추지 않고 동시에 여러가지 작업을 처리할 수 있으며 기다리는 과정에서 다른 함수도 호출할 수 있다.

 

function work() {
  const start = Date.now();
  for (let i = 0; i < 1000000000; i++) {}
  const end = Date.now(); //현재 시간을 숫자 형태로 가져오는 내장 함수
  console.log(end - start + 'ms'); // 작업이 얼마나 걸렸는지 알려줌
}

work();
console.log('다음 작업');

작업시간ms
다음 작업

위의 코드는 work() 함수가 호출되면 다른 작업은 하지 않고 오직 work()함수의 for문만 실행한다.

 

만약 work()함수가 실행되는 동안 동시에 다른 작업도 진행하고 싶다면 비동기 상태로 전환해줘야한다. 이러한 경우 setTimeout 함수를 사용해준다.

setTimeout() 함수는 매개변수 2개를 받는다. 첫번째 매개변수는 동작할 함수를 받고, 두번째 매개변수에 넣은 시간이 흐른 후 함수를 호출해 준다. 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('다음 작업');

작업 시작!
다음 작업
작업시간ms

위와 같은 경우는 work() 함수의 작업이 시작되고 나서 for문이 돌아가는 동안 다음 작업도 실행되고, for문이 끝나고 나서 몇 ms가 걸렸는지 나타낸다.

 

만약 work() 함수가 끝난 후 다음 작업을 처리하고 싶다면??

콜백 함수를 파라미터로 전달해준다!!

콜백 함수란, 함수 타입의 값을 파라미터로 넘겨줘서 파라미터로 받은 함수를 특정 작업이 끝나고 호출해주는 것을 말한다.

 

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

console.log('작업 시작!');
work(() => {
  console.log('작업이 끝났어요!')
});
console.log('다음 작업');

작업 시작!
다음 작업
작업시간ms
작업이 끝났어요!