JS 비동기 처리
function doit(){
console.log("start do it"); // 실행 순 2
// 5초 대기 때림
const wakeUpTime=Date.now()+5000;
while(Date.now()<wakeUpTime){};
console.log("do it ended"); // 실행 순 3
}
console.log("init code"); // 실행 순 1
doit(); // 버튼을 눌러 이 코드를 실행하면, 5초간 아무것도 못함
//-> 해당 웹페이지는 5초간 벽돌. "순서대로" 실행되기 때문.
// 순차적으로 실행되는 처리 -> 동기식 처리
console.log("end code"); // 실행 순 4
function doit(){
console.log("do it started");
}
setTimeout(doit, 5000); // JS 내장 명령, 첫 번째 파라미터로 함수, 2번째로 시간(밀리초)을 받음
// 5초 후에 doit 함수를, 현재의 코드 흐름과는 전혀 상관 없는 곳에다가 작업을 예약을 함.
// 그리고 프로그램은 doit을 예약해두고 다음 코드를 실행함.
console.log("hello"); // 이렇게 되면, hello가 먼저 출력이 되고, 5초 후에 doit이 실행이 됨.
function doit(){
console.log("do it 시작"); // 실행순 2??
// 5초 대기 때림
const wakeUpTime=Date.now()+5000;
while(Date.now()<wakeUpTime){};
console.log("do it 끝");
}
console.log("init code"); // 실행 순 1
setTimeout(doit, 0); // 이걸 별도의 작업 공간에 예약을 걸어버리면서 다음 코드를 실행하는데,
// 현재 대기 시간이 0초이기에,
// do it 시작이 먼저 나올지, end code가 먼저 나올지는 알 수 없다고 강사님이 말하심.
console.log("end code"); // 실행순 2???
// end code가 먼저 나오는 이유는, setTimeout은 비동기 처리이기 때문.....이라고 코파일럿이 자동완성을 해주긴 했는데,
// 아마 딱 그 비동기 처리를 위해 잠깐 다른 영역으로 보내는 미세한 시간차때문에
// end code가 미세하게 살짝 먼저 나오고, 그 다음 do it 시작이 나오게 된 것 같다.
function doit1(){
console.log("do it 1 시작");
// 5초 대기 때림
const wakeUpTime=Date.now()+5000;
while(Date.now()<wakeUpTime){};
console.log("do it 1 끝");
}
function doit2(){
console.log("do it 2 시작");
// 5초 대기 때림
const wakeUpTime=Date.now()+5000;
while(Date.now()<wakeUpTime){};
console.log("do it 2 끝");
}
console.log("init code");
setTimeout(doit1, 300);
setTimeout(doit2, 100);
console.log("end code");
// 설정된 시간에 따라서 먼저 doit2가 실행되고, 그 다음 doit1이 실행되는 것을 확인할 수 있다.
// 비동기 처리는 실행 순서와 코드 호출 순서간에 상관이 없다.
console.log("init code");
setTimeout(function(){
console.log("do it 1 시작");
// 5초 대기 때림
const wakeUpTime=Date.now()+5000;
while(Date.now()<wakeUpTime){};
console.log("do it 1 끝");
setTimeout(function (){
console.log("do it 2 시작");
// 5초 대기 때림
const wakeUpTime=Date.now()+5000;
while(Date.now()<wakeUpTime){};
console.log("do it 2 끝");
setTimeout(function (){
console.log("do it 3 시작");
// 5초 대기 때림
const wakeUpTime=Date.now()+5000;
while(Date.now()<wakeUpTime){};
console.log("do it 3 끝");
}, 100);
}, 100);
}, 300);
console.log("end code");
// 지금같은 코드는, do it 1 - do it 2 - do it 3 순으로 작동을 한다.
콜백 지옥
시간이 오래 걸릴 것 같은 작업을,
프로그램의 전체 흐름과 상관없이 독립적으로 실행시키는 것
-> 이러한 흐름을,
비동기처리 라고 한다.
비동기 처리를 응용하면,
동시에 여러개의 작업을 수행시킬 수 있다.
메인 흐름하고 별개의 작업이기 때문에,
setTimeOut을 여러개 걸면,
여러개의 작업이 동시에 걸리게 되는 것.
setTimeOut을 쓸 때에는, 콜백 함수 스타일을 많이 쓴다.
-> 95-callback-hell.js 참고
그런데 이런 식으로 여러개의 타이머가 서로 순차적으로 실행되게 되면,
코드가 꼬리에 꼬리를 물고 들어가게 된다.
JS 문법의 특징.
JS는 콜백 함수 스타일로 비동기 작업(프로그램의 메인 흐름에 상관 없이 백그라운드에서 독립적으로 수행되는 작업)을 처리하는데,
콜백 함수 작업이 종료된 이후에 후속 처리를 하고 싶으면,
콜백 안에 콜백 함수를 또 넣어야 함
-> 콜백 안에 콜백 안에 콜백....
==> JS 코드가 굉장히 난해하고 지저분하게 만들어지게 되는 대표적인 원인.
==> JS 공식 용어로, callback hell 이라고 부른다.
JS가 버전업을 하면서 탈피하고 싶었던 문법 구조 중 하나가 callback 지옥이였다.
-> JS 코드가 지저분하게 보이게 되는 가장 큰 이유였기에....
ES6에서 promise라는 방법으로 일단 개선,
그런데 이것도 크게 차이가 안남.
ES7 즈음에서,
async-await 문법으로 최종 진화를 함.
이 문법을 쓰는 대표적인 경우
-> Ajax 통신.
Ajax 가 가장 대표적인(이고 거의 주된) 비동기 처리.
웹페이지에서 비동기 처리를 안한다면?
1.로그인 버튼 눌렀는데 웹페이지가 멈춰?
2.글 저장했는데 웹페이지가 멈춰?
.....등등
-> 개쓰레기 페이지.