Understanding Callback functions in Jquery

Callback and Functions

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.

[edit]

Callback without arguments

For a callback with no arguments you pass it like this:

 $.get('myhtmlpage.html', myCallBack);

Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are 'First class citizens' and so can be passed around like variable references and executed at a later time.

[edit]

Callback with arguments

"What do you do if you have arguments that you want to pass?", you might ask yourself.

[edit]

Wrong

The Wrong Way (will not work!)

 $.get('myhtmlpage.html', myCallBack(param1, param2));

This will not work because it calls

myCallBack(param1, param2)

and then passes the return value as the second parameter to $.get()

[edit]

Right

The problem with the above example is that myCallBack(param1, param2) is evaluated before being passed as a function. Javascript and by extension jQuery expects a function pointer in cases like these. I.E. setTimeout function.

In the below usage, an anonymous function is created (just a block of statements) and is registered as the callback function. Note the use of 'function(){'. The anonymous function does exactly one thing: calls myCallBack, with the values of param1 and param2 in the outer scope.

$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});

param1 and param2 are evaluated as a callback when the '$.get' is done getting the page.

source :http://docs.jquery.com/Tutorials:How_jQuery_Works#jQuery:_The_Basics

Converting Jquery to DOM

Converting a jquery object o DOM object

var nodeObjsArray = $(".NodeClass").get();

The above script will fetch all DOM objects whose class name matches "NodeClass"
Note that it returns an array. To fetch each DOM element you will have to iterate through it. This hold good even if there is only one match you would get an array
with one DOM object in it


var nodeObjs = $(".NodeClass").get(0);

same as

var nodeObjs = $(".NodeClass")[0]


In the above script we are fetching the DOM object directly unlike the previous case

Converting DOM to JQuery Object

var domObj = document.getElementById("elementID");
var jqObj = $(domObj );

Reference
http://api.jquery.com/get/

Water Drop Photography : Learnings