Why jquery then callback is running before deferred is resolved?

Question

I am trying to implement a load more ajax function. However, whenever the button is clicked, it runs the function inside then() before deferred object is resolved. I had to use setTimeout in then to make it work. I don't think this is a correct way since it makes then() completely meaningless ? Can anyone take a look what's going on please? Thanks.

        $(document).on('click', '.c-button--lg', function() {

            var appendHTML = function () {
                var $dfd = $.Deferred();
                $.get(nextLink, function(html) { 
                    $pillarContainer.append(html); 
                    console.log(0);
                    $dfd.resolve();
                });
                return $dfd.promise();
            };

            appendHTML().then(function(){ 
                console.log(1); //This is running before console.log(0);
            });
        });

Your code defines a function named appendHTML(), but calls a function named appendData(). Thus, we have no idea what appendData() actually is. In addition, you should just return the promise that $.get() already returns. There is no reason to use the promise anti-pattern of creating a new deferred here. — jfriend00
– jfriend00, Commented Aug 31, 2016 at 17:37

jfriend00 · Accepted Answer · 2018-03-02 02:56:06Z

1

Because you define appendHTML, but call appendData() in your code example, it is not clear what appendData() in your code actually does.

If you meant for appendHTML and appendData to be the same function name in your question, then you can vastly simplify what you have like this and also avoid the promise anti-pattern of wrapping an existing promise in another unnecessary promise/deferred (and also avoid the bugs you introduced by doing that because you don't have proper error handling). And, it should not have the problem you report either.

This code just returns the promise that $.get() already returns and it uses that promise to process the result so you're consistently using promises (not mixing promises with custom jQuery callbacks):

   $(document).on('click', '.c-button--lg', function () {

       // define $pillarContainer somewhere in here

       function appendData() {
           return $.get(nextLink).then(function(html) {
               $pillarContainer.append(html);
               console.log(0);
               return html;
           });
       };

       appendData().then(function () {
           console.log(1); //This is running before console.log(0);
       });
   });

edited Mar 2, 2018 at 2:56

answered Aug 31, 2016 at 17:34

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

user2734550 Over a year ago

Thanks for the answer. console.log(1) is actually a plugin init function that would search the appended html and apply an equal height. Somehow this init function has to be called in setTimeout for html that is loaded from ajax. I'll just stay with setTImeout since it is working.

jfriend00 Over a year ago

@user2734550 - If you create a question with the real code in it and the real circumstances, we could probably solve the problem and remove the setTimeout() hack.

user2734550 Over a year ago

The "promise anti-patter" link you provided explains really well. Thanks.

Collectives™ on Stack Overflow

Why jquery then callback is running before deferred is resolved?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related