javascript - 点击时的Jquery动画，在多次点击时停止重复

Question

我有这样的代码：

$("#ajax_stuff").load("/site/method", $('.myselector').serializeArray()).delay(100).fadeOut('slow').delay(20).fadeIn('slow');

基本上，每次有人单击复选框列表中的复选框时都会触发该事件。如果有人快速连续点击 20 个复选框，效果会重复 20 次。

理想情况下，我只希望它为他们单击的最后一个框做一个效果，然后停止。

我试过了

$("#ajax_stuff").load("/site/method", $('.myselector').serializeArray()).stop(true,true).delay(100).fadeOut('slow').delay(20).fadeIn('slow');

但这似乎没有任何作用。任何建议将不胜感激！

Answer 1

var delay = (function () {
 var timer = 0;
 return function(callback, ms){
 clearTimeout (timer);
 timer = setTimeout(callback, ms);
      };
    })();
$(function(){
    $("/*CHECKBOX SELECTOR*/").on("click",function(){
        delay((function(){
                      $("#ajax_stuff").load("/site/method", $('.myselector').serializeArray()).stop(true,true).delay(100).fadeOut('slow').delay(20).fadeIn('slow');}),1000);
});
});

我认为，在这种情况下，setTimeout 是您的朋友。我没有在单击复选框时使用它，但是您可能必须将事件处理程序从单击更改为选择或其他内容。我刚才试着把它放进去jsfiddle，但它可能已经崩溃了？无论如何都不加载。