jQuery multiple methods waiting

Question

Hello,

Is there a way to wait for hide function in a loop? I mean if I have this structure in html:

<div class='example'>
    <span> One </span>
    <span> Two </span>
    <span> Three </span>
<div>

And in js I want to do something like this:

$('.example span').each(function(i, span) {
    $(span).hide('slow');
});

I believe js is asynchronous so it will not wait for hide to end, but maybe there is a way which I don't know to wait until hide animation finishes and continue on next element?

Answer 1

You can use .delay() to run them at the right times, like this:

$('.example span').each(function(i, span) {
  $(span).delay(600 * i).hide('slow');
});

You can give it a try here

All we're doing here is delaying the next animation 600ms (the "slow" duration) times it's index, so the first starts instantly (0-based, 0*600=0), the second at 600ms (the first should finish then), the third at 1200ms, etc.

Answer 2

You can call a function when hiding animation is complete - hide the next one from that callback.

function hideTags()
{
  var tags = $('.post-taglist a');
  var len = tags.length;
  var hide = function(i){
    if(i >= len)
      return;
    tags.eq(i).hide(1000, function(){hide(i + 1);});
  };
  hide(0);
}

Run this from your Firebug console to see your tags disappearing one after another.

Answer 3

I use the async.js library for managing this sort of stuff:

async.forEachSeries($('.example span'), function(span, callback) {
  $(span).hide('slow', callback);
});​

This will run each hide function in series, without relying on a delay function which has to match the speed of the hide animation.

You can try it out here.

Admittedly, it might not be worth including another library just for this one issue, but if you run into problems ordering asynchronous calls such as animations and ajax functions a lot then I recommend you take a look :)

You can find the async.js library on github