[JS] Javascript의 비동기(asynchronous)

 

 

비동기(asynchronous)

: 두가지 이상의 작업을 동시에 처리하는 것,

: 자바스크립트에서 비동기로 처리하는 경우들 : eventListener, ajax, Timer(setTimeout)

: 자바스크립트는 single thread로 동작하기 때문에 비동기 처리를 진행할 수 없다. 따라서 자바스크립트의 

  interpreter가 코드를 읽다가 비동기 처리가 필요한 함수를 만나면 해당 함수의 비동기 처리를 브라우저(web APIs)에게 넘긴다.

  브라우저는 비동기 처리를 끝내고 나면 실행할 콜백함수를 Call Back queue에 저장한다.

  만약 자바스크립트의 stack영역이 비어있다면 stack영역에 queue에 저장된 함수를 올린다.

  이미 stack 영역에서 처리중인 작업이 있다면 해당 작업들이 모두 종료되기를 기다렸다가 stack 영역에 함수를 올린다.

 

  ex) 로그인 기능을 비동기로 처리하는 이유는 서버의 이용자가 많은 경우 한 명의 로그인이 완료될 때까지 올곧이

       그걸 다 기다렸다가 한 명, 한 명 로그인 처리해줄 수 없기 때문에 비동기 방식을 사용하여 빨리 처리되는대로 완료 시키는

       형태로 로그인 기능을 구현하게 된다.

 

***

자바스크립트 혼자 힘만으로는 비동기를 구현할 수 없다. -> 브라우저의 도움을 받아야 함(사실상 비동기 처리는 브라우저가 진행)

비동기로 동작하는 함수를 만났을 때 자바스크립트에서는 이 함수를 브라우저로 던지게 된다.(=처리요청)

한 마디로 자바스크립트는 브라우저에게 비동기 함수를 보내주는 역할을 한다.

브라우저가 요청을 읽는 중에 자바스크립트는 자기가 읽어야 할 다음 코드를 읽어나가게 된다.

 

 

 

 

 

ex) 

자바스크립트가 코드를 위-아래로 읽어내려갈 때 각 코드들이 실행될 때까지 기다리지 않고

브라우저로 처리 요청을 보낸 뒤에 JS는 자신이 읽어야 할 코드를 계속적으로 읽어나간다.

 

브라우저에는 darkgreen - darkseagreen - marron 요청이 들어가게 되고

브라우저에서는 설정된 시간이 달성된 후 call back 함수를 부르게 된다.

-> 결국 코드의 순서에 상관없이 darkseagreen - darkgreen - maroon 의 순서대로 컬러가 바뀌게 된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$('#async-note').addEventListener('click',(e) => {                  setTimeout(() => {         e.target.style.backgroundColor = 'darkgreen';            }, 2000);                  setTimeout(() => {             e.target.style.backgroundColor = 'darkseagreen';                 }, 1000);                  setTimeout(() => {             e.target.style.backgroundColor = 'maroon';                }, 3000);       })  Colored by Color Scripter

cs

 

 

- 콜백함수를 불러 비동기 처리하기

 

$('#async-test').addEventListener('click',(e) => {
        
        setTimeout(() => {
            e.target.style.backgroundColor = 'green';
                setTimeout(() => {
                    e.target.style.backgroundColor = 'yellow';
                        setTimeout(() => {
                            e.target.style.backgroundColor = 'blue';
                            setTimeout(() => {
                                e.target.style.backgroundColor = 'pink';
                                }, 1000);
                        }, 1000);
                }, 1000);
        }, 1000);
        
        e.target.innerHTML = '<a href="https://www.naver.com">비동기 실습 링크<a>';    //HTML에 넣어주기
    });
    
    
    </script>

 

=> 결과값으로는 색상이 순서대로 바뀌는 것을 확인할 수 있다.

     ( 하지만 계속적으로 콜백함수를 불러내는 코드는 콜백 지옥을 만들어낸다.)