JQuery отложенное исполнение

Question

Я пытаюсь изучить jQuery Deferred и лучший способ узнать, вероятно, это попытаться понять их на своих примерах. Я пытаюсь сделать show, затем fadeout (1000 мс) сообщение пользователю после нажатия кнопки и после успешного выполнения ajax. Когда пользователь нажимает несколько секунд, сообщение отображается только один раз. Мне бы хотелось, чтобы этот сценарий: пользователь нажимает 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

Я думаю .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(); } 
     }); 
    }); 
}); 

Answer 2

Вы можете цепи обработчики для deferred вместе, используя .then. См. Документы.

Answer 3

Что-то вроде этого?

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