Using jQuery to loop thru DOM objects with optional delay

You want to loop through a collection of DOM objects, so you use .each().

But what if you want to have a delay between effects on the current item?

In short – don’t use .each() for looping – and don’t use setTimeout for the delay.

We’re going to call items by index instead, optionally using a clever way to add a delay.

You’ve probably run into this before, you loop over items using .each() and apply, say, a fade effect.

Works fine. Each item has the effect applied immediately.

But what if we wanted a delay between each item having the effect applied? There’s articles out there explaining how to use setTimeout to accomplish this but I didn’t want to go that route.

Instead we are going to have two functions.

One function calls an item in a collection by using it’s index.
The other function is our delay.

Markup
We’re going to start off with a simple collection of list items.

<ul class="ul-example">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
</ul>

jQuery

Access item via index function
Our first function we’ll name getData().

This function will access each item via it’s index, apply a fade to that item, then call our delay function.

The delay function, when completed, in turn calls our getData() function again passing it a new index increased by 1.

Keep in mind the getData() function is not “looping” through our items, it is accessing them individually based on their index. (Yeah, I know the post title says “looping” – but that’s for SEO )

function getData(i){
		//set index to zero at init
		if( typeof(i) === "undefined" ){
			var i = 0;
		}
		
		//our dom collection
		var _coll = $(".ul-example li");
		
		//dom collection is empty or does not exist
		if( $(_coll).length === 0 ){
			return false;
		}
		
		//reached end of dom collection
		if( i >= $(_coll).length ){
		    return false;
		}

		//do something to current item like fadeTo
		$(_coll).eq(i).fadeTo(300,0.2,function(){
			//increase index by 1
			i++;
			
			//only use either of these - not both
			//delay
			delayFunc( 2000, "getData(" + i + ")" );
			//no delay
			getData(i);
		});
};

Delay function
For our delay, instead of using setTimeout or .delay()(which is only for animations), we are going to use .animate().

We create a jQuery object and run .animate() on it for a set period of time in milliseconds, that gives us our delay. The object doesn’t have to be appended to the DOM for .animate() to work on it. Cool, huh?

When the time interval has completed it calls the passed function, in this case our getData() function to get items via their index.

The delay function takes two arguments:

delayFunc(milliseconds, function);

The function argument must be passed as a string, example:

delayFunc( 2000, "getData(" + i + ")" );

function delayFunc(t,func){
		//if no delay duration, set to zero
		if( typeof(t) === "undefined" ){
			var t = 0;
		}
		
		//if no function passed, cancel
		if( typeof(func) === "undefined" ){
			return false;
		}
		
		//create virtual object
		var _delayObj = $("<div></div>");
		$(_delayObj).animate({
			opacity:1
			},t,function(){
				//call our passed function
				$.globalEval(func);
			}
		);
	}

* This delay function can be repurposed to add a delay whenever you need it – just remember you need to pass a function to the delay.

See the full working examples here.

Tested in:
jQuery 1.7.2+
FF 3.6+, Safari, Chrome, IE8+, iOS

Great books are available on JavaScript and jQuery.