CODEWITHSUNDEEP
javascriptjquery
Kid Diamond
Kid Diamond

Reputation: 2301

How to wait until .done() is done before proceeding

I want to execute $(".foo").fadeIn("slow"); after everything from .done() is done.

Right now whenever the fadeIn is called I can still see how the text is being changed live because jQuery doesn't wait until it's done with that.

How would I go about doing that?

$(".notice").fadeOut("slow", function() {
    $.ajax({
        url: "http://graph.facebook.com/name",
        cache: false,
        dataType: "JSON"
    })
    .done(function(data) {
        $(".foo .bar").text(data.name);
    });
    $(".foo").fadeIn("slow"); //
});

Upvotes: 0

Views: 86

Answers (3)

SirDeveloper
SirDeveloper

Reputation: 276

You can use a chain of done:

$.ajax({
    url: "http://graph.facebook.com/name",
    cache: false,
    dataType: "JSON"
}).done(function(data) {
    $(".foo .bar").text(data.name);
}).done(function() {
   $(".foo").fadeIn("slow"); 
});

DEMO.

Upvotes: 0

Jan Hommes
Jan Hommes

Reputation: 5152

Move it into your ajax-done function:

$(".notice").fadeOut("slow", function() {
    $.ajax({
        url: "http://graph.facebook.com/name",
        cache: false,
        dataType: "JSON"
    })
    .done(function(data) {
        $(".foo .bar").text(data.name);
        $(".foo").fadeIn("slow"); //move it here and it will be called if your ajax request is ready
        callMethod(); //alternative you can call a mehtod
    });
});

function callMethod() {
    $(".foo").fadeIn("slow");
}

Upvotes: 0

matewka
matewka

Reputation: 10148

Put your code inside the callback of the jQuery.done method

$(".notice").fadeOut("slow", function() {
    $.ajax({
        url: "http://graph.facebook.com/name",
        cache: false,
        dataType: "JSON"
    })
    .done(function(data) {
        $(".foo .bar").text(data.name);

        $(".foo").fadeIn("slow"); //
    });

});

Upvotes: 2

Related Questions