Agregando demora a una solicitud de $ .post jquery

Question

Estoy enviando una solicitud jquery $ .post en cualquier cambio de casilla de verificación en un formulario. Lo que quiero es retrasar $ .post por 500 ms en caso de que un usuario verifique más de una casilla rápidamente, para evitar múltiples solicitudes inútiles.

Aquí está mi código, he añadido una función setTimeout que parece funcionar con todo excepto esta función $ .post ...

var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
    clearTimeout (timer); 
    timer = setTimeout(callback, ms); 
    }; 
})(); 

$(document).ready(function() { 

    $('.checkbox').change(function() { 

     delay(function(){        
      $.post("/?page_id=4", $("#selectors").serialize(), function(data){ 
       $('#results').html(data); 
      }); 
     }); 

    }, 1000); 

}); 

Cualquier idea de por qué esto no funciona?

Answer 1

Live example

esto:

$('.checkbox').change(function() { 

    delay(function(){        
     $.post("/?page_id=4", $("#selectors").serialize(), function(data){ 
      $('#results').html(data); 
     }); 
    }); 

}, 1000); 

debería ser:

$('.checkbox').change(function() { 

     delay(function(){  
      alert('post');    
      $.post("/?page_id=4", $("#selectors").serialize(), function(data){ 
       $('#results').html(data); 
      }); 
     }, 1000); 

    }); 

Answer 2

jQuery ya cuenta con una función de retardo:

$(window).delay(500).queue(function() { 
    $.post({}); 
});