How to call a js object method after calling another method?

Question

I often saw this code in jQuery.

$('div').action1().delay(miliseconds).action2(); 

I could implement this at one level of action in the following code.

 function $(id) { var $ = document.getElementById(id); $.action1 = function() { }; return $; } 

How to write delay() and action2() so that I can use them that way?

 $('div').action1().delay(miliseconds).action2(); 

Answer 1

What you mean is called a chain. Besides being used for animation, the key to remembering is to return this from your function.

If you want to see how certain jQuery functions work, check out the code for removeClass :

 removeClass: function( value ) { if ( jQuery.isFunction(value) ) { return this.each(function(i) { var self = jQuery(this); self.removeClass( value.call(this, i, self.attr("class")) ); }); } if ( (value && typeof value === "string") || value === undefined ) { var classNames = (value || "").split(rspace); for ( var i = 0, l = this.length; i < l; i++ ) { var elem = this[i]; if ( elem.nodeType === 1 && elem.className ) { if ( value ) { var className = (" " + elem.className + " ").replace(rclass, " "); for ( var c = 0, cl = classNames.length; c < cl; c++ ) { className = className.replace(" " + classNames[c] + " ", " "); } elem.className = jQuery.trim( className ); } else { elem.className = ""; } } } } return this; }, 

Pay attention to return this; in the end? This allows you to call $('#myelement').removeClass('highlight').someOtherFunction() , because at the end of removeClass you are still working with the jQuery object itself.

If you want to learn other functions, check out the jQuery development version (unminified): http://code.jquery.com/jquery-1.4.2.js

Edit: in order to more fully answer your question, you can write your own functions to chain the chain as follows (enable after jQuery is turned on):

 (function($){ $.fn.extend({ action1: function() { return this; }, action2: function() { return this; } })(jQuery); 

This essentially creates your own plugin. You can find many tutorials on the Internet on how to do this, or open a plugin that you are already viewing.

Here is one simple tutorial: http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

Edit2: Without going too far in creating jQuery plugins (since your questions are about javascript in general), I just wanted to mention that if you use the jQuery plugin, you will need:
return this.each(function() {});
therefore, your function executes all the elements selected by the selector.

Answer 2

.delay() used for animations

Of course, there are other ways you can do this, but jQuery is a chained way. That is, you do not need to write a bunch of anonymous functions or custom callbacks if you do not want to. Convenience in the chain!

On the other hand, if you really want to set up animation callbacks, you can!

 $('#foo').slideDown(500, function(){ alert('foo is visible now!'); }); 

Learn more about the jQuery Effects API .

It might be useful to look at the built-in JavaScript function setTimeout() .