How to delay the execution of a function with jquery?

Question

I have that kind of code to append an li element to a given ul with a fancy effect, then I call a function whose behavior depends on the # of children of that ul :

$(li).hide().appendTo("#ul-authors").show("blind");
toggleIfNeeded();

...

function toggleIfNeeded() {
  if ($("#ul-authors > li").length === 1) {
     doSomething();
  } else {
     doSomethingElse();
  }
}

The problem is, when toggleIfNeeded is called, the new li does not seem to exist yet, since the effect is not totally performed. If I remove the effect, it works correctly.

How can I do that ? I guess I need some sort of a timer, but that would be asynchronous (I don't want to block the app for a fancy effect) or, even better, a way to tell "call that function when the effect is performed".

I don't have the possibility to change 1 with 0 in the above since the code can be called in other contexts where no effect is involved.

Well, thanks @XuqiciAcerto, but my question was more precisely "how do we use callbacks in that context ?" — Fabien
– Fabien, Commented Mar 1, 2013 at 13:45

Michael Mior · Accepted Answer · 2013-03-01 13:41:40Z

3

You can pass a callback to .show(). If you change

$(li).hide().appendTo("#ul-authors").show("blind");
toggleIfNeeded();

to

$(li).hide().appendTo("#ul-authors").show("blind", toggleIfNeeded);

then your function will be called automatically when the animation is finished.

answered Mar 1, 2013 at 13:41

Michael Mior

28.9k10 gold badges95 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Romko · Accepted Answer · 2013-03-01 13:42:31Z

1

the second parameter to show() can be a function where you can do what you want when animation ends

answered Mar 1, 2013 at 13:42

Romko

1,79721 silver badges28 bronze badges

Comments

Sriram · Accepted Answer · 2013-03-01 13:45:43Z

1

Try this

.show('<effect>', callbackFunction)

answered Mar 1, 2013 at 13:45

Sriram

3,0099 gold badges30 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to delay the execution of a function with jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related