Here's a little plugin that may be what you're looking for:
jQuery.fn.slowEach = function( interval, callback ) {
var array = this;
if( ! array.length ) return;
var i = 0;
next();
function next() {
if( callback.call( array[i], i, array[i] ) !== false )
if( ++i < array.length )
setTimeout( next, interval );
}
};
// test code
function logit( i ) {
console.log( this.id || this.className );
if( i == 4 ) return false;
}
console.log( 'FAST' );
$('div').each( logit );
console.log( 'SLOW' );
$('div').slowEach( 1000, logit );
To test it, open www.jquery.com and then open Firebug and switch it to the
multiple line console input window (use the little orange up-arrow in the
bottom right of the Firebug panel). Paste the above code into the Firebug
console and hit Ctrl+Enter to run it.
You should see five DIV id/class values scroll by rapidly, then the same
id/class values will scroll by with a pause between them. The plugin
supports "return false" to stop the iteration just like the regular .each().
-Mike
> From: d.williams
>
> Hi, all. I was wondering how I insert a pause between moving
> to the next item in an each function.
>
> Pseudo-code:
> $('things').each(function() {
> \\ do suff
> sleep(5000);
> });
>
> I know I need to use setTimeout, but I'm not sure how to pass
> setTimeout an iterator so the next item is passed.
>
> Any ideas?
>
> Thanks,
>
> Danny
>
