jQuery Deferred not working as expected

Question

This is my first time using $.Deferred(); and it's proving to be a mission.

I have read jQuery Deferred not working, but that applies to ajax events, so doesn't really help in my case.

I have the following code in javascript:

var deferred = $.Deferred();

deferred.done(function() {
    console.log(auth.loggedIn);
    if(auth.loggedIn) {
        app.page = 'usr/dashboard';
    }
}

deferred.resolve(auth.initialize());

My auth object looks like this:

var auth = {

    loggedIn:false,

    initialize:function() {
        var data = {
            'login_token':app.getCookie('login_token'),
            'usr_id':app.getCookie('usr_id'),
            'source':config.source,
            'language_code':config.language_code,
            'country_code':config.country_code
        }
        app.api('usr/loggedin',data,function(data) {
            var response = JSON.parse(data);
            if(!response.result) {
                auth.loggedIn = false;
            }
            auth.loggedIn = true;
            console.log(auth.loggedIn);
        },'post');
    }
}

Now, if I console.log(response) in the app.api callback, the response is exactly what I expect it to be, if I console.log(auth.loggedIn) I get true.

If I console.log in deferred.done and console.log(auth.loggedIn) (in initialize I get two different values. What am I doing wrong and how can I make my app wait for auth.loggedIn to be set?

UPDATE

This is how I am now doing it in my main file:

auth.initialize().done(function(auth) {
    if(auth.loggedIn) {
        app.page = 'usr/dashboard';
    }
    jsRouter.initialize();
});

jsRouter is based on this 20 line javascript router and now only sometimes shows the template page, regardless of the page I am on.

The jsRouter.initialize function looks like this:

initialize:function() {
    window.addEventListener('hashchange',jsRouter.router);
    window.addEventListener('load',jsRouter.router);

    /* ERROR PAGES */
    jsRouter.route('404','errors/404',function() {});
    jsRouter.route('500','errors/500',function() {});

    /* ACTUAL PAGES */
    jsRouter.route('/','home',function() {});
    jsRouter.route('/home','home',function() {});
    jsRouter.route('/usr/register','usr/register',function() {});
    jsRouter.route('/usr/login','usr/login',function() {});
    jsRouter.route('/usr/forgotpassword','usr/forgotpassword',function() {});
    jsRouter.route('/usr/activate','usr/activate',function() {});
    jsRouter.route('/usr/dashboard','usr/dashboard',function() {});
    jsRouter.route('/adr','adr/index',function() {});
},

I have updated my app.api callback to look exactly like what Felix King suggested.

I think you make deferred in your `app.api` call, assuming it's AJAX call. — Marcos Pérez Gude, Jul 07 '15 at 12:41
It seems that you should `return` the result of calling `app.api` but you are not, which causes the promise to be resolved with an undefined payload. — Jon, Jul 07 '15 at 12:42
app.api looks like it could be Asynchronous Javascript ... is it? — Jaromanda X, Jul 07 '15 at 12:44
`app.api` is a function which uses ajax to make calls to an API. — Bird87 ZA, Jul 07 '15 at 12:46

Felix Kling · Accepted Answer · 2015-07-07T16:04:29.027

2

You are currently resolving the deferred object with undefined, which does not make sense. You are also resolving it before the app.api callback was executed. The deferred object has to be resolved by the asynchronous callback.

auth.initialize should return the deferred object / promise, and you have to resolve it in the app.api callback:

var auth = {

    loggedIn:false,

    initialize:function() {
       var deferred = new $.Deferred();          // <- create deferred object
        var data = {
            'login_token':app.getCookie('login_token'),
            'usr_id':app.getCookie('usr_id'),
            'source':config.source,
            'language_code':config.language_code,
            'country_code':config.country_code
        }
        app.api('usr/loggedin',data,function(data) {
            auth.loggedIn = JSON.parse(data).result;
            deferred.resolve(auth);              // <- resolve when response was received
        },'post');
        return deferred.promise();               // <- return promise
    }
}

auth.initilize().done(function(auth) { 
  // at this point the login succeeded (or failed)
});

edited Jul 07 '15 at 16:04

answered Jul 07 '15 at 12:44

Felix Kling

795,719
175
1,089
1,143

Was just writing the same answer. – Etheryte Jul 07 '15 at 12:45
Now my router, based on http://joakimbeng.eu01.aws.af.cm/a-javascript-router-in-20-lines/ and called after `if(auth.loggedIn) {}` only sometimes shows the template page. – Bird87 ZA Jul 07 '15 at 13:40
Updated my question to make it more clear after this answer – Bird87 ZA Jul 07 '15 at 13:45
This is jQuery, therefore `return deferred.promise();` (it's a method, not a property). – Roamer-1888 Jul 07 '15 at 14:23
@Roamer-1888: Thanks. Wasn't sure anymore. Fixed. – Felix Kling Jul 07 '15 at 14:29
It's very confusing especially if you move between Q and jQuery. Also, should `auth.loggedIn = true;` not be in an `else` clause, or something more concise? – Roamer-1888 Jul 07 '15 at 15:55
1

@Roamer-1888: Right, fixed as well. Didn't pay too much attention to the actual logic. – Felix Kling Jul 07 '15 at 16:04
Answered helped a lot. Thanks. Solved my issue with the router by just calling it before doing the auth. – Bird87 ZA Jul 08 '15 at 08:15

jQuery Deferred not working as expected

UPDATE

1 Answers1