jQuery when

Summary: There are many jquery functions that you can use in your jquery code. In this article, we will go over a few of the most common jquery when functions and how to use them!

How jQuery when method works:

This JQuery when() method allows you to execute callback functions depending on zero or more Tenable objects, which usually are Deferred objects that represent asynchronous events. For instance, this provides a clean way of executing logic when an AJAX request has been completed and it’s about time for the user interface to update with new data retrieved from the backend server in real-time.




deferred: This parameter specifies zero or more objects that are not able to be executed until you tell them.

Return Value: This method returns a Promise. The promise can be used to determine the success or failure of an operation that will take some time, such as downloading data from another location on the internet.

This is how you use promises!


In this example, the Deferred() is used to create a new object and after that, the method is called with notify and resolve methods. This can be very useful in many different instances where you want to perform an action when another one completes or if something goes wrong during some process of tasks such as creating all these objects for our code snippet!

	<script src="https://code.jquery.com/jquery-3.5.0.js">
<body style="text-align:center;">
	<h1 style="color:green;">
	JQuery.when() method
	<button onclick = "Geeks();">
	click here
	<p id="GFG_DOWN">
		var def = $.Deferred();
		function Geeks() {
			$.when().then(function(a) {
			"when() method called this alert()." );

The JQuery when() method evaluates the passed in arguments to determine if any were successful. If at least one of them was, it will execute the Promise returned by JQuery.when(). Otherwise, JQuery.when() silently returns its own promise as failed (without executing any callbacks).

This JQuery function is used when JQuery is not loaded on the page and JQuery.when().then() will be executed only when JQuery.js is downloaded and JQuery has been loaded to handle JQuerys functionality!

This JQuery function allows you to bind a click event to a set of elements in JQuery:


$(selector).on(events, selector [, data], handler (eventObject)


Selector: This is a Jquery selector used to specify which JQuerys need to bind the JQuery function.

Data: Data can be assigned as an optional parameter in the JQuery.on function JQuery event delegation is a JQuery event technique that allows JQuery to handle events and not the HTML element which might require Jquery in order for us to use Jquery functionality like JQuery click, JQuerys blur(), touch() and many more!

Handler: This is a JQuery event handler function. JQuery’s event handling functions can be called without arguments or with just an event object, and JQuery will always follow the same JQuery rules for parameter order. JQUERY callbacks are JQUERY JavaScript functions that are executed when

Return Value: This method returns an un-fired JQuery Event object.

This JQuery function allows us to remove JQuery event(s) binding and JQuery handlers from JQuery:


$(selector).off([events], JQuerys [, handler]);


If you would like to learn more about how JQuery when can be used in your website or app, please feel free to reach out. We are happy to provide a demo and answer any questions you may have.

Also read: jQuery Add Style

Follow us on Facebook

Leave a Comment