jquery - Jquery 延迟执行

Question

我正在尝试学习 jQuery Deferred，最好的学习方法可能是尝试在您自己的示例中理解它们。在用户单击按钮并成功执行 ajax 后，我试图show然后（1000 毫秒）向用户发送一条消息。fadeout当用户在几秒钟内点击几下时，消息只显示一次。我想要这样的场景：用户在一秒钟内点击 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

您可以使用.thendeferred将处理程序链接在一起。请参阅文档。

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