웹브라우저가 웹페이지( Document )를 다운로드해서 화면에 보여주는 과정이 있습니다.
onload 이벤트가 되었을때 사용자가 다음 작업을 진행할겁니다.
여기서 이 이벤트의 문제점은 모든 그림파일( 광고그림 포함 ) 을 모두 다운로드해서 발생된다는 문제가 있습니다.
jQuery 는 ready 이벤트를 사용해서 작동이 가능한 상태 - DOM이 완전히 올라온 상태 - 가 되었다는 이벤트를 보내줍니다.
$( Document ).ready ( function() {
$("a").click( function() {
alert("welcome");
});
});
Callbacks and Functions
많은 프로그램 언어들과 달리 자바스크립트는 나중에 실행될수 있도록 함수를 자유롭게 전달할수 있습니다.
콜백(Callback)은 다른함수의 인자로서 전달되어져서 자신의 부모함수가 완전히 수행된 후에 실행되어지는 함수를 말합니다.
콜백은 자신의 부모함수가 끝날때 까지 인내심을 가지고 실행되기를 기다리기 때문에 특별합니다. 반면에 웹브라우저는 다른 함수나 다른 작업을 수행합니다.
콜백을 사용하기 위해서는 자신을 부모함수에게 인자로서 전달하는 방법을 아는 것이 중요합니다.
인자가 없는 콜백함수
$.get("myhtmlpage.html", mycallback);
$.get 이 myhtmlpage.html 페이지를 가져오는것은 끝낸후에 mycallback 함수를 실행합니다.
인자가 있는 콜백함수
인자를 가지고 있는 콜백함수를 실행하는 것은 까다롭습니다.
잘못된 표현
$.get( "myhtmlpage.html", mycallback( param1, param2 ) );
이게 실패하는 이유는 이 코드는 mycallback( param1, param2 ) 함수를 즉시 실행한 후에 mycallback 함수의 반환값을 $.get 함수의 인자로 넘겨주기 때문입니다.
그러면 어떻게 mycallback 함수를 인자로 넘겨줄수 있을까요?
올바른 표현
$.get( "myhtmlpage.html", function() {
mycallback(param1, param2);
});
$.get 함수가 myhtmlpage.html 페이지를 가져오는 것을 완료한 다음에 Anonymous function 을 실행합니다. 이 Anonymous function 은 mycallback 함수를 실행합니다.
희망잡이