这种延迟是否需要某种解决方案

时间:2013-02-26 19:28:30

标签: jquery jquery-deferred

在我为特定成员或来宾准备页面之前,我正在检查用户是否已登录。如果他们有饼干,他们就是会员,如果不是,他们就是客人。

我做得好吗?

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();

    }

}

1 个答案:

答案 0 :(得分:1)

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

然后,假设您希望在成员数据可用时立即解决您的延迟(这实际上使答案更加简单,因为vkTemplate()未返回承诺,我们可能必须编写包装器为了保持代码的可读性。。

结果如下:

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.
     });
});