JQuery Callbacks Object

The Callbacks is reference to executable code or piece of executable code that is passed as an argument from other method which is invoked due to some kind of event. It can be used as base for new components to define their functionality. It will get fired when DOM component is ready. The callback() methods used for multipurpose task at one time .The callback() function provides following methods:

  • callbacks.add(): It is used to add callback function in callback list.
  • callbacks.disable(): It disables the callback list.
  • callbacks.empty(): It removes all callbacks from the list.
  • callbacks.fire(): It calls all the callbacks with given arguments.
  • callbacks.has(): It determines whether callback is in list or not.
  • callbacks. lock(): It is used to lock callback list.

We can create callback list as follows:

var callbacks=$.Callbacks();

Example using add() and fire() Methods

<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Callback Methods</title>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script>
      var myval = function( val ) {
      document.write(val);
      };
      var callbacks = $.Callbacks();
      callbacks.add( myval);
      callbacks.fire( "Welcome to JavaBeat!!!!" );
   </script>
</body>
</html>

As shown in above example, add() method is used to add callback function in callback list and fire() method executes the added functions and calls all the callbacks with given arguments. These all can be added to $.Callbacks list and invoked as shown above.

When you run the above example, you would get the following output:

JQuery Callbacks - Add and Fire Methods

Example using empty () and has() Methods

<!DOCTYPE html>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var myval = function( val ) {
	document.write(val);
};
var myval1 = function( val ) {
	document.write(val);
};
var callbacks = $.Callbacks();
callbacks.add(myval);
callbacks.fire( "Welcome to JavaBeat!!!<br>" );
callbacks.add(myval1);
document.write(callbacks.has(myval1));
document.write("<br>");
callbacks.empty();
document.write(callbacks.has(myval));
</script>
</body>
</html>

As mentioned in the previous example, we are using here also add() and fire() methods. In this code, we are using empty() method which removes all callbacks from the list. This can be added to $.Callbacks list and invoked as shown above. The has() method determines whether callback function is available in the list or not. As defined in the code, we are adding myval1 callback function to callback list.

In next line, has() method will display true on the output because it’s not removed from the list. In the next line, we have called empty() method. Now if we try to call myval callback function, we will get false on the output, because empty () method has removed that function from the callback list.

When you run the above example, you would get the following output:

JQuery Callbacks - Empty and Has Methods

Example using lock() Method

<!DOCTYPE html>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var myval = function(a,b) {
	document.write(a*b);
};
var callbacks = $.Callbacks();
callbacks.add(myval);
callbacks.fire( 5,3);
callbacks.lock();
callbacks.fire("hello world!!");
</script>
</body>
</html>

As shown in the above example, we are using add() and fire() methods as used in the previous examples. The myval callback function is going to display multiplication of two numbers as specified in the arguments. Then fire() method will display the result of multiplication. In the next line, lock() method is used which is going to lock callback list. After defining lock() method, the hello world!! line will not print on the output.

When you run the above example, you would get the following output:

Callback lock method

Example using disable() Method

<!DOCTYPE html>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var myval = function(a,b) {
	document.write(a+b);
};
var callbacks = $.Callbacks();
callbacks.add(myval);
callbacks.fire( 10,5);
callbacks.disable();
callbacks.fire("hello world!!!");
</script>
</body>
</html>

The disable() method is as same as lock() method. After defining disable() method, the hello world!!! line will not print on the output.

When you run the above example, you would get the following output:

Callback disable method

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*