jquery - 这种推迟是否需要某种解决方案

Question

在为成员(member)或访客准备特定页面之前，我会检查用户是否已登录。如果他们有 cookie，他们就是成员(member)，如果没有，他们就是客人。

我做得正确吗？

function check_if_member(){

    var dfd = new $.Deferred();
    if (readCookie('isco')){
        //adds jquery data() element "user_information"
        //after making a jquery ajax post to retrieve it
        //and using a template to write data to the page
        //with the `success()` callback
        prepare_member('member');
    } else {
        //reveals some HTML on the page
        prepare_member('guest');
    }  
}

$(document).ready(function(){
    //before page loads, check if user is member
    $.when(check_if_member())
     .then(function(){
        console.log($('body').data('user_information'));
        return false; 
     });
});

我想我终于对延迟有了一些了解，但它们仍然让我感到困惑，我想知道我是否正确地构建了它，或者我是否需要为我的任何 ajax 请求添加解析或返回行或者将收集到的信息保存到 jquery data() 的行。谢谢。

编辑

prepare_member函数

function prepare_member(type) {

    if (type == 'member') {
        var user_information = readCookie('isco')

        $('body').data('user_information', user_information);

        var user_id = $('body').data('user_information').user_id;

        $.ajax({
            type: 'post',
            url: "/address.php",
            data: {
                type: "retrieve",
                user_id: user_id,
                isbilling: true
            },
            dataType: 'json',
            success: function (returnedData) {

                $('body').data('user_information').billing_information = returnedData['address_0'];

                //populate member billing fields
                $('#member_billing_container').append('<div>').children(':last')
                                                              .vkTemplate('/member_billing_template.tmpl', returnedData, function () {
                                                                  //some callback - possibly resolve promise
                                                              });
                //populate member contact fields
                $('#member_contact_container').append('<div>').children(':last')
                                                              .vkTemplate('/member_contact_template.tmpl', JSON.stringify(user_information), function () {
                                                                  //some callback - possibly resolve promise  
                                                               });
            }
        });

        $('.guest_container, .guest').hide();
        $('.member_container, .member').show();

    } else {

        $('.guest_container, .guest').show();
        $('.member_container, .member').hide();

    }

}

Answer 1

首先，由于我们讨论的是 Deferreds，因此我们不会使用 success处理程序。 $.ajax()返回一个 promise ，因此我们可以将其链接到 done()并继续使用延迟模式。

然后，假设您希望在成员数据可用时立即解决您的 Deferred (这实际上使答案变得更简单，因为 vkTemplate() 不返回 promise ，并且我们可能必须编写一个包装器以保持代码可读)。

结果会是这样的:

function check_if_member()
{
    var dfd = $.Deferred(),           // Can be called without 'new'.
        cookie = readCookie("isco");  // Avoid reading cookie twice.
    prepare_member(cookie, dfd);
    return dfd.promise();             // Return promise.
}

function prepare_member(user_information, dfd) {
    if (user_information) {
        // Member mode.
        $("body").data("user-information", user_information);
        $.ajax({
            type: "post",
            url: "/address.php",
            data: {
                type: "retrieve",
                user_id: user_information.user_id,
                isbilling: true
            },
            dataType: "json"
        }).done(function(returnedData) {
            user_information.billing_information = returnedData["address_0"];
            dfd.resolve();  // Member data is available, resolve Deferred.
            $("#member_billing_container").append("<div>").children(":last")
                .vkTemplate("/member_billing_template.tmpl", returnedData,
                    function() {
                        // Maybe chain widgets or handlers...
                    });
            $("#member_contact_container").append("<div>").children(":last")
                .vkTemplate("/member_contact_template.tmpl",
                    JSON.stringify(user_information),
                    function () {
                        // Maybe chain widgets or handlers...
                    });
        });
        $(".guest_container, .guest").hide();
        $(".member_container, .member").show();

    } else {
        // Guest mode.
        dfd.resolve();  // No member data available, resolve Deferred
                        // (synchronously here). You might also want
                        // to reject() it instead.
        $(".guest_container, .guest").show();
        $(".member_container, .member").hide();
    }
}

$(document).ready(function() {
    $.when(check_if_member())
     .then(function() {
          console.log($("body").data("user-information"));
     });
});

现在，也许您不必使用 <body>元素的数据将用户信息传达给您的 then()处理程序。延迟对象可以与任何信息一起解决(或拒绝或通知)，例如:

user_information.billing_information = returnedData["address_0"];
dfd.resolve(user_information);  // Member data is available, resolve Deferred
                                // and pass user information through promise.

那么你只需要写:

$(document).ready(function() {
    $.when(check_if_member())
     .then(function(user_information) {
          console.log(user_information);  // Will be undefined in guest mode.
     });
});