콜백 함수란?
- 현재 실행되고 있는 효과 가 완전하게 종료 후에 실행되는 함수를 뜻합니다.
- 자바스크립트의 경우 라인순서로 실행하는데 효과가 끝나기전에 다음 라인(소스)를 실행하는데 이것은 에러를 발생시킬 우려가있다!
그러므로, 콜백함수를 사용함으로써 방지가능!
그럼 콜백함수에 대해 예제로 알아보자.
1 2 3 4 5 | $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); | cs |
매우 간단한 예제입니다.
버튼을 클릭시 "P" 태그를 Hide(숨기기) 시키며, Hide가 완료되면 알림창을 띄웁니다.(콜백함수 실행)
콜백함수가 실행되는 부분 $("p").hide("slow", function(){ 이 부분이며 Slow로 Hide하며
효과과 종료되면 function(함수) 안에 내용을 실행시키는것입니다.
조금 더 응용하여
게시판에서 글 목록을 불러올때 저는 Callback함수를 이용하여 사용하는데 일부분을 발췌해 살펴보자,
<Html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(document).ready(function () { var i = 1; var $listDiv = $(".list"); var $fm = $(".fm"); var url = "http://192.168.1.14:8081/todo/list"; getTodo(todoList, url); function todoList(result) { var str = ""; for (var i = 0; i < result.length; i++) { str += "<li>" + result[i].tno + " " + result[i].title + " " + result[i].writer + "</li>" } $listDiv.html(str); } | cs |
<Javascript>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var getTodo = function (callback, url) { console.log("Start todo..............."); $.ajax({ //ajax 실행 url: url, dataType: "json", success: function (result) { //result = data.json 메뉴 데이터 console.log("result = " + result); todo1 = result; // null을 data.json 메뉴데이터로 바꿔준다 if (callback) { callback(result); } } }); }; | cs |
게시판 프로젝트 소스의 Callback함수를 사용하여 글 목록을 불러오는 부분 입니다.
위에 Html소스부터 보면 getTodo함수에 todoList와 url전달,
todoList를 callback함수로 받아서 아래 ajax실행 후 성공 시, callback함수(todoList함수)를 실행하는 동작원리입니다.
이렇게 콜백함수를 통하여 게시판의 C,R,U,D를 처리할 수 있겠습니다.
'Javascript' 카테고리의 다른 글
| Java 와 JavaScript 차이점 (0) | 2016.09.29 |
|---|---|
| [JS] Json알아가기(Hashmap, List, Array, Value) (0) | 2016.08.31 |
| [Javascript] 다음 지도 API를 사용하여 음식점 마커 표시하기 (0) | 2016.08.17 |
| [JS] 편의점 소스 예제 (0) | 2016.08.16 |
