[jQuery] callback & chaining

    javascript는 line 단위로 실행 되기 때문에 가끔 실행된 다음줄이 바로 실행되서 에러 유발하기도 한다. 이럴 때, 한 줄의 실행이 다 완료된 상태에서 다음 줄을 실행되는 것을 보장하기 위해 사용하는 것이 'callback'이다. 일반적으로 'callback'을 사용하기 위한 문법은 아래와 같다.

Typical syntax: $(selector).hide(speed,callback);

    callback을 사용한 예제와 사용하지 않은 예제를 비교해보면 아래와 같다.

without Callback

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

with Callback

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});

   

    chaining은 jQuery의 method를 수행하면 주체가 되었던 element가 반환 되기 때문에 다시 같은 element를 찾는 수고를 덜어준다. method뒤에 바로 다음 실행할 method를 써주면 된다. 이를 chaining라고 한다. 단, line이 길어지면 white space와 indentaion으로 readablity를 신경 써주면 더 좋은 코드가 된다.

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

출처 : http://www.w3schools.com