点击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 ，但是它可能崩溃了？ 不加载不管。