点击Jquery动画，停止多次重复

Question

I've got code like this:

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

And basically, that is triggered each time someone clicks a checkbox in a list of checkboxes. What happens is if someone quickly clicks 20 checkboxes in a row, the effect repeats 20 times.

Ideally i just want it to do one effect for the last box they clicked and then stop.

I've tried

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

But that doesn't seem to do anything. Any advice would be very gratefully received!

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 is your friend in this case, I think. I haven't used it on checkbox clicks, but you might have to changed the event handler from click to select or something. I tried to put it in jsfiddle just now, but it's crashed maybe? Not loading regardless.