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('다음 작업'); // work() 가 다 끝나고 실행됨

 

비동기적 처리

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() 사용하면 비동기적으로 작업 수행할 수 있다.

 

※ 0 으로 초기값 설정해도 4ms 이후에 실행된다.(시스템에서의 최소 조건 기본값이기 때문)

 

만약 이 상태에서 work() 함수 끝난 다음 다른 작업 수행하고 싶다면,

callback 함수 사용

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(end - start);
    }, 0)
}

console.log('작업 시작');

work((ms) => {
	console,log('작업이 다 끝났어요!');
    console,log(ms + 'ms 걸렸다고 해요');
});

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

 

비동기 작업 수행

Ajax Web API 요청 - 요청이후 서버에서 요청할 때까지 기다려야하기 때문에

파일 읽기

암호화 / 복호화

작업 예약

-- 대부분 시간이 조금 걸리는 작업들에 대해서 비동기 작업을 사용한다.

.. 등의 상황에서 사용한다.