jQuery Timeout Function Jan 22 + 2 comments

written by: ryan coughlin

UPDATE: Edited the code thanks to Adrian Green. Thanks for the comment

jQuery does offer callbacks for most of its functions, but what if you want to delay or timeout a certain effect or function there isn’t a function made for that. This article should help you achieve that.

Old School JavaScript

I have been trying to search for a nice and reusable way to use jQuery to timeout effects or functions. We are familiar with using the traditional JavaScript function setTimeout():

setTimeout (function,timeout);

After putting in some data we can come up with something like this:

setTimeout (showBox(),2500);

Remember that the value 2500 is in MS (milliseconds), we equates to 2.5 seconds. When this function is called, it will execute 2500ms later. I was using this for one of my projects where I wanted two effects/functions not after, but during. I could have used very handy jQuery callback and load in a function, but it would have been executed after the first function is completed.

Let’s Start Delaying Effects – The Code

Lets jump right into the belly of the beast and view the code to call our handy jQuery timeout function. Essentially we have a small jQuery plugin. We define the function as: $.idle()

jQuery.fn.idle = function(time){
	var i = $(this);
	i.queue(function(){
		setTimeout(function(){
			i.dequeue();
		}, time);
	});
};

You see on the first line above we create the idle function: jQuery.fn.idle. We created the variable I to store $(this), which is going to be element that is running the $.idle(); function.

We then use the jQuery queue(); function whose documentation can be found on the jQuery website. Then we attach the $(this); variable we created called: i to it, and create the setTimeout(), which then uses dequeue(); with our variable connected to it.

The last part, where we create the time parameter for the function, so we call the following code and:

$.idle(2500);

time gets replaced with the user input of 2500ms to the function. Say if you want to call a function you can use it in this context instead of the messy old fashion setTimeout(); function.

$('.myelement').fadeIn().idle(2000).fadeOut('slow');

The above simple reads: fade in my element, then wait 2000ms, slowly fade out the same element. BOOM! There it is, the quick n’ dirty method to delaying functions using jQuery.

Take a peak at some more?