jQuery Load, prevent from happening twice?

Question

I am using jquery load to load php pages into my content area.

I have noticed some screwy behavior if the user repeatedly clicks on the navigation menu items abusively.

Right now my code is as simple as hiding the content pane, loading the new page, then fading in:

 $("#homeLink").click(function(){
    $("#contentPane").hide();
    $("#contentPane").load("welcome.php");
    $("#contentPane").fadeIn();
 });

Problematic behavior: new link is clicked, pane fades in with the previous page (then updates to the new page)

I tried using $.ajax({async:false});, but this all persisted. At this point, I am considering re-writing my navigation system to vary includes based off of url parameters, unless some insight can be provided as to how I can stop it from queuing a second load call until the first is complete?

Answer 1

You can use "complete" callback. It is executed when the request completes.

$("#homeLink").click(function() {
    var pane = $("#contentPane");

    pane.hide();
    pane.load("welcome.php", function() {
        pane.fadeIn();
    });
});