Using jQuery callback functions

I’ve heard questions in the past regarding how to run a script after a jQuery animation or event has been completed.

The majority of these believe that you need to delay the script for a few seconds, allowing the animation to complete before the 2nd function is called. For example:

$foo.load("MyWebPage.htm");
$foo.delay(1000).css("color", "red");

Here, the jQuery object $foo is being loaded with a web page’s content, then while this is happening a delay of 1000 milliseconds is set, before the css colour is changed to red.

This is not the best method, and can cause various problems. The load time of MyWebPage.htm will be a variable amount of time. Therefore it is not possible to estimate how long the delay needs to be set for.

Setting the delay to 1000 milliseconds could result in the css being set before or after the content has loaded, and not when the content has loaded.

Fortunately, a lot of jQuery methods also provide a callback function. This allows us to run a function when the current function has completed.

The script below will run the load function on $foo, and once this has finished executing, the css function will then be executed.

$foo.load("MyWebPage.html", function(){
    $(this).css("color", "red");
});

This means you don’t need to guess how long the first function will take to complete, and also ensures that the 2nd function is consistently ran precisely after the 1st has completed.

1 Comment

  1. Woah! I’m really enjoying the template/theme of this blog. It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between superb usability and visual appearance. I must say that you’ve done a awesome job with this. In addition, the blog loads extremely quick for me on Firefox. Outstanding Blog!|

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2014 Curtis Timson

Theme by Anders NorenUp ↑