비동기 처리

1. 비동기 처리의 가장 흔한 사례 jquery ajax

• 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야하는데,
  이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있다.

<script>
 function getData(){
        var tableData;
        $.get('https://domain.com/products/1', function(response){
                tableData = response;
        });
        return tableData;
    }
    console.log(getData()); 
    //undefined
  
 </script>

$.get()이 ajax통신을 하는 부분으로,
https://domain.com 에다가 HTTP GET요청을 날려 1번 상품 (product)정보를 요청하는 코드이다. = 지정된 url에 데이터를 하나 보내주세요. 라는 요청과 같다.

그렇게 서버에서 받아온 데이터는 response 인자에 담기고, tableData = response; 코드로 받아온 데이터를 tableData라는 변수에 저장함.
이때 getData()를 호출하면 받아온 데이터가 찍히나, undefined로 나온다.

$.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문. 따라서 getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값인 undefined를 출력하게 된다.

이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기처리이다. 자바스크립트에서 비동기처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지 모르기때문에 마냥 다른 코드를 실행하지 않고 기다릴 순 없기때문이다.

-만약 저런 코드 1개가 아니라 100개를 보낸다고 생각하면 ?
-비동기처리가 아니고 동기처리라면 코드를 실행하고 기다리고 -하나 실행하는데 수십분은 걸릴것.

비동기처리의 setTimeout()

setTimeout()은 web API의 종류로 코드를 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다.

<script>
	console.log('hello');
    setTimeout( function(){
    	console.log('bye');
    },3000);
    console.log('hello Again');
</script>

예상 : hello 출력-> 3초있다가 bye출력-> hello Again 출력
실제 : hello 출력 -> hello again출력 -> 3초있다가 bye출력

setTimeout() 역시 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음코드를 수행하는 것이아니라 일단 setTimeout()을 실행하고 나서 바로 다음코드인 console.log('hello Again');으로 넘어간다.
따라서 hello -> hello Again -> bye 출력

비동기 실행 방식인 setTimeout을 이용한 예제

<script>
  console.log('1');
  function exec() {
      setTimeout( function(){
          console.log('2');
      },3000);
      setTimeout( function(){
          console.log('3');
      },0);

      console.log('4');
      setTimeout( function(){
          console.log('5');
          },1000);
      }
      console.log(exec());
  
</script>

실행결과 1 -> 4 -> 3 -> 5 -> 2
setTimeout이 지연시간이 0이라고 해도 실행컨텍스트가 다르기 때문에 1,4가 먼저 출력됨

<script>
    var i;
    for ( i = 0; i < 5; i++ ){
        setTimeout( function(){
            console.log(i);
        },1000);
    }
</script>