Javascript 비동기 호출

window 객체

전역 객체라서 default이므로 생략할 수 있다. window에는 비동기 호출 등 다양한 함수가 존재한다. 그 중 대표적인 것으로 setTimeout이라는 함수가 있다.

setTimeout

function run() {
    console.log("run start");
    setTimeout(function() {
        var msg = "hello";
        console.log(msg);
    }, 2000);
    console.log("run end");
}

위와 같이 사용할 수 있다. setTimeout 함수는 매개변수로 받은 함수를 지정된 ms 뒤에 호출해주는 역할을 한다.

중요한 것은 setTimeout은 비동기 함수이므로 setTimeout에 지정한 함수가 호출될 때까지 기다리지 않는다. 따라서 위 코드를 실행하면 아래와 같이 결과가 나타난다.

run start
run end

...

hello

Ajax

비동기로 Web Server에 요청을 보내는 기술이다. 예를 들어 회원가입 페이지에서 ID 중복검사를 할 때 새로고침이 되면 안되기 때문에, 페이지가 그대로인 상태에서 비동기로 요청을 보내야 한다. 아래처럼 사용할 수 있다.

function ajax(data) {
	var oReq = new XMLHttpRequest();
	oReq.addEventListener("load", function() {
		console.log(this.responseText);
	});    
	oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
	oReq.send();
}

oReq.open 함수를 보면 HTTP 요청 타입과 요청할 URL이 적혀있다. URL 뒤에 요청 매개변수를 붙여서 보낼 수 있다. 

비동기 호출 방식

비동기 함수는 평범한 함수처럼 stack에 쌓이지 않는다. 비동기 함수가 호출될 상황이 되면, event queue라는 곳에 넣어진다. 그 후 event queue에서 자신의 차례가 되면 호출된다.