Question

我正在尝试学习jQuery Deferred，最好的学习方法可能是尝试在自己的例子中理解它们。在点击按钮并成功执行ajax之后，我正在尝试show然后fadeout（1000毫秒）向用户发送消息。当用户单击几秒钟时，消息仅显示一次。我想这个场景：用户在一秒钟内点击7次，该消息框连续七次显示并淡出。整个过程可能需要7秒钟。几行代码：

    $("#AddToCart").click(function () {

            var wantedquantity = $("#wantedquantity").val();              
      $.ajax({
                type: "POST",
                url: ROOT + "Cart/AddToCart",
                data: { idd: '@Model.Id', quantity: wantedquantity },
                success: function () {             
                    $("#cartNumber").load(ROOT + 'Cart/_NOfItemsInCart');
                    $("#MessageAddedToCart").css("visibility", "visible").css("display", "block").css("box-shadow", "6px 6px 4px 4px #808080").html("Product added to cart");
                    $("#MessageAddedToCart").fadeOut(1000, function (){
                    });
               }
          });
        });
    });

Answer 1

您可以使用.then将deferred的处理程序链接在一起。参见文档。

Answer 2

这样的东西？

var requests = [];
$("#AddToCart").click(function () {
    var new_def = $.Deferred();
    var call = function() {
        $.ajax({
            // other stuff
            success: function() {
                // other stuff
                $("#MessageAddedToCart").fadeOut(1000, function() {
                    // remove request from requests
                    var idx = requests.indexOf(new_def);
                    if (idx !== -1) {
                        requests.splice(idx, 1);
                    }
                    // mark it as resolved
                    new_def.resolve();
                });
            }
        });
    };

    var def = requests[requests.length-1];
    if (def) {
        def.done(call);
    } else {
        call();
    }
    requests.push(new_def);
});

Answer 3

我认为.queue可以在这里工作：

$("#AddToCart").click(function() {
    $(this).queue(function(next) {
        $.ajax({
            // other stuff
            success: function() {
                $("#cartNumber").load(ROOT + 'Cart/_NOfItemsInCart');
                $("#MessageAddedToCart")
                    .css({
                         visibility: "visible",
                         display: "block",
                         "box-shadow": "6px 6px 4px 4px #808080"
                    })
                    .html("Product added to cart");
                    .fadeOut(1000, function() {
                        next()
                    });
            },
            error: function() { next(); }
        });
    });
});

Jquery延迟执行

3 个答案: