将延迟添加到 $.post jquery 请求

Question

我在表单中任何复选框更改时都会发送一个jquery $.post请求。我想要的是，如果用户快速勾选多个复选框，则延迟$.post 500毫秒，以避免多个无用的请求。

这是我的代码，我添加了一个setTimeout函数，它似乎可以与除了这个$.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 );

});

有什么想法为什么这不起作用？

- Phil

---

我通常这样使用setTimeout：timer = window.setTimeout(function, 1000); - ipalaus

“}, 1000” 不是错位了吗？它不应该是 delay() 函数的第二个参数而不是 change() 函数的参数吗？ - Elian Ebbing

@ElianEbbing @Phil Elian所说的。你将1000传递给.change。同时将默认的timer设置为undefined，否则你会意外地杀死id === 0的setTimeout。 - Raynos

@ElianEbbing，你说得完全正确，我漏掉了那个，谢谢你指出来！ - Phil

Answer 1

Live example

这个：

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

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

}, 1000 );

应该是：

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

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

    });

- subhaze

---

这个完美地解决了！我简直不敢相信我错过了那个。非常感谢。 - Phil

是啊，我讨厌这样做，但我们所有人都会在某个时候犯错 :P - subhaze

Answer 2

jQuery已经有了延迟函数：

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

- sod

---

更新：我已添加$.dequeue()，它将在按下复选框的次数上运行多次，但是由于间隔，它击败了目的。 - raveren