작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있기 때문이다.
하지만 이를 비동기적으로 처리를 한다면 흐름이 멈추지 않기 때문에 동시에 여러 작업을 처리할 수 있다.
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('다음 작업');
지금은 work()
함수가 노출되면, for문이 돌아갈 때는 다른 작업은 처리하지 않고 온전히 for 문만 실행하고 있다.
만약 이 작업이 진행되는 동안 다른 작업도 하고 싶다면 함수를 비동기 형태로 전환을 해줘야 하는데, 그렇게 하기 위해서는 setTimeOut
이라는 함수를 사용해주어야 한다.
function work() {
setTimeout(() => {
const start = Date.now();
for (let i = 0; i < 10000000; i++) {}
const end = Date.now();
console.log(end - start + 'ms');
}, 0);
}
console.log('작업시작');
work();
console.log('다음 작업');
setTimeout
함수는 첫번째 파라미터에 넣은 함수를 두번째 파라미터에 넣은 시간(ms 단위)이 흐른 후 호출해준다. (0ms 이후에 실행한다는 의미이지만, 실제로는 4ms 이후에 실행된다.)
이렇게 setTimeout
을 사용하면 우리가 정한 작업이 백그라운드에서 수행되기 때문에 기존의 코드 흐름을 막지 않고 동시에 다른 작업들을 진행 할 수 있다.
만약에 work 함수가 끝난 다음에 어떤 작업을 처리하고 싶다면 어떻게 해야할까?
콜백함수란, 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출해주는 것을 의미한다.
function work(callback) {
setTimeout(() => {
const start = Date.now();
for (let i = 0; i < 10000000; i++) {}
const end = Date.now();
console.log(end - start + 'ms');
callback();
}, 0);
}
console.log('작업 시작');
work(() => {
console.log('작업이 끝났어요!')
});
console.log('다음 작업');