Why is my `then` event firing before my `when` event is finished?

Question

I have a list of previewed posts on my page. When they're clicked on, they should load the full text of the post, load the comments, and slide down to reveal both.

I have one function, partialSlide, that simulates slideDown, but starting at a specified height - it's adapted from this answer. The other two functions, loadFullPost and loadComments are mine.

All the events are firing, but partialSlide is firing before loadComments is finished, so it's not taking them into account when calculating the height, and hence they're being cut off.

Why is that happening when I have them set up in a when > then format?

$.when(loadComments(divID,postID)).done(partialSlide(divID));

Am I misunderstanding how promises work in jQuery? Elsewhere in my code they've worked as expected (the then only runs once the when is done).

Full functions below:

function loadFullPost(permalink,divID,postID) {
    $.when($.when($.ajax({url: permalink+"?ajax=true", success:                 
       function(result){$("#"+divID+"").html(result);}})).then
           (function( data, textStatus, jqXHR ) {
            $.when(loadComments(divID,postID)).done(partialSlide(divID));
    }));    
}

function loadComments(divID,postID) {
    $.ajax({url: "ajax-comments/?post_id=" + postID, success:      
    function(result){
        $("#" + divID + " .comment.list").html(result);
    }});
}   

function partialSlide(divID) {
    var contentHeight = $("#"+divID+"").addClass('full').height();
        $("#"+divID+"").removeClass('full').animate({ 
            height: (contentHeight == $("#"+divID+"").height() ? 100 : contentHeight)
        }, 500);    
}

`loadComments` doesn't return a pomise, so `$.when` has nothing to do. Also, you want to pass a function to `.done`. Right now you are calling `partialSlide` and pass its *return value* (which is `undefined`) to `.done`. `foo(bar())` and `foo(bar)` are very different. — Felix Kling, Oct 20 '15 at 14:08
http://jsfiddle.net/arunpjohny/306t2cez/1/ - there is no need to make that complex — Arun P Johny, Oct 20 '15 at 14:09
return the `$.ajax` from `load comments`, I hope jQuery ajax has implemented Promise. — sabithpocker, Oct 20 '15 at 14:09
Why are you doing `$.when($.when(...))`? What are you trying to accomplish there? — gen_Eric, Oct 20 '15 at 14:13
The multiple $whens are a mistake, I've misunderstood their use. — Sinister Beard, Oct 20 '15 at 14:16
@ArunPJohny - Thanks, your (much) simplified version of the functions works perfectly; do you want to add them as an answer? — Sinister Beard, Oct 20 '15 at 14:17

AtheistP3ace · Answer 1 · 2015-10-20T14:14:06.097

4

I think your issue might be that loadComments doesn't have a return so the promise is never given to the when.

function loadComments(divID,postID) {
    return $.ajax({url: "ajax-comments/?post_id=" + postID, success:      
    function(result){
        $("#" + divID + " .comment.list").html(result);
    }});
}

As pointed out in the comments this line is calling partialSlide immediately since you have parentheses at the end. It should be:

$.when(loadComments(divID,postID)).done(function () { partialSlide(divID) });

edited Oct 20 '15 at 14:14

answered Oct 20 '15 at 14:08

AtheistP3ace

9,611
12
43
43

1

what about `.done(partialSlide(divID))`? - irrespective of whether `loadComments` returns promise or not the `partialSlide` is called – Arun P Johny Oct 20 '15 at 14:09
1

That's only part of the problem. – Felix Kling Oct 20 '15 at 14:10
partialSlide is just seems like its your completion function so it doesn't need to return a promise or anything really since it just animates a height. jquery ajax call returns a promise by default. – AtheistP3ace Oct 20 '15 at 14:11
If there are no promises given to a when I believe done is called immediately. – AtheistP3ace Oct 20 '15 at 14:12
2

@AtheistP3ace: `.done(partialSlide(divID))` should be `.done(function(){ partialSlide(divID); })` – gen_Eric Oct 20 '15 at 14:12
@RocketHazmat that is true as well. He is calling that immediately there. Missed that. – AtheistP3ace Oct 20 '15 at 14:12

score 2 · Accepted Answer · answered Oct 20 '15 at 14:29

As already explained the comments there are multiple problems in the code like

$.ajax() returns a promise object so there is no need to pass it to $.when()
Since you want something to do after the ajax request in loadComments is completed, you need to return a promise from that. Since $.ajax returns a promise you can just return that value
You need to pass a function reference to done(), when you do partialSlide(divID) you are actually calling the function partialSlide by passing the parameter and is passing the value returned from it(undefined in this case) as the done callback.

So

function loadFullPost(permalink, divID, postID) {
    $.ajax({
        url: permalink + "?ajax=true",
        success: function (result) {
            $("#" + divID + "").html(result);
            loadComments(divID, postID).done(function () {
                partialSlide(divID)
            })
        }
    })
}

function loadComments(divID, postID) {
    return $.ajax({
        url: "ajax-comments/?post_id=" + postID,
        success: function (result) {
            $("#" + divID + " .comment.list").html(result);
        }
    });
}

function partialSlide(divID) {
    var contentHeight = $("#" + divID + "").addClass('full').height();
    $("#" + divID + "").removeClass('full').animate({
        height: (contentHeight == $("#" + divID + "").height() ? 100 : contentHeight)
    }, 500);
}

Why is my `then` event firing before my `when` event is finished?

2 Answers2