자바스크립트 비동기 프로그래밍

개요

동기 방식

• 한 업무가 끝나야, 다음 업무를 시작한다.
• 소스 코드의 흐름은 위에서 아래로, 좌에서 우로 진행된다.
• 순서가 보장되며, 위의 코드가 오래 걸리면 아래 코드는 진행되지 않는다.

 

비동기 방식

• 다른 업무를 기다리지 않고 진행한다, 동시에 진행 되는 것이 아님
• 소스 코드의 흐름이 위에서 아래, 좌에서 우를 보장하지 않는다.
• 순서가 보장되지 않는 대신 오래 걸리는 작업 대신, 다른 작업을 먼저 진행할 수 있다.

자바스크립트는 싱글 스레드 기반 비동기 프로그래밍이다.

따라서, 멀티 스레드 방식이 아닌 비동기 프로그래밍을 해야 한다.

 

Multi Thread (멀티 쓰레드 방식)

여러 함수들을 동시에 수행할 수 있다. 

 

Asynchronous (비동기 방식)

싱글 쓰레드 기반의 한계를 극복하기 위해 나온 프로그래밍
시간이 걸리는 함수를 잠시 보류하고, 다른 함수 부터 수행한다.

 

 

 

예제

1. setTimeout

비동기 함수로, 두번째 매개변수 시간(ms) 만큼 시간이 지난 후, 첫번째 매개 변수를 실행

 

코드

console.log(1);
setTimeout(() => {
    console.log(2);
}, 1000);
console.log(3);

 

출력

 

2. sleep 함수 구현

1. 시작 시간을 저장 해둔다.
2. 매개변수를 시작 시간에 더해준다.
3. 현재 시간이 Limit 시간이 될때까지 무한 Loop

코드

function sleep(delay) {
    const start = Date.now();
    let limit = start + delay;
    while(Date.now() < limit) {}
}

console.log("밥먹기");
sleep(3000);
console.log("설거지");

 

출력

 

밥먹기 후 세팅해놓은 3000ms(3초) 후에 설거지가 출력되었다.