자바스크립트 비동기 호출

자바스크립트 코딩에서 비동기 호출은 빈번히 발생합니다. 복잡한 페이지에서는 10번이상 서버에 호출해서 데이터를 가져오는 경우도 있습니다. 그래서 간단한 비동기 호출에 대해서 알아 보겠습니다.

xmlhttp, ajax를 이용한 get,post 호출에서 success, fail 이벤트 핸들러로 받는것이 일반적인 비동기 호출입니다.

아래는 사용자 정의 함수를 만들어서  비동기 호출을 하는 샘플입니다.

-------------------------------------------------------

<script>

        function getFirst(name, callback) {

            //AJAX 등 비동기 호출로 대체가능
            setTimeout(function () {
                callback();
            }, 3000);
           
        }
        this.getFirst('bj', function () {
            alert('async');
        });
        alert('sync');
       
    </script>

------------------------------------------------------

 

onload 이벤트에서 getFirst 함수를 호출했을경우, 순차적으로 실행되므로, alert 창으로 sync가 먼저 찍히고,  getFirst함수가 호출되고 3초후  callback 함수 호출시 비로소 async alert창이 뜸을 알 수 있다.

베이스가 되는 코드값을 로드해야 다음 프로세스를 진행할 수 있을 경우, 유용하게 사용될수 있습니다.