jquery优化ajax请求？php和js

我有钮扣。单击此按钮发送

$.post（）

请求并将项目添加到购物篮。我希望，若用户快速点击按钮十次，它不能发送10个请求，但只有一个宽度计数10。 代码如下：

<div class='qty'>
<input type='text' id="qty" value='1'>
<a class='button' href='#'>add To Basket</a>

</div>

您可以在

.button#onclick

处理程序中调用

$.post（）

（而不是直接发布值）一小段时间（例如1秒）。超时处理程序必须全局保存到变量中，以执行所有

.button#onclick

执行。此外，每次执行

。按钮#onclick

都必须检查previos timeout是否仍处于活动状态。如果是，请取消旧超时并设置新超时。如果没有，只需设置新的

---

因此，每次单击按钮都会取消旧超时并设置新超时。只执行最后一次单击设置超时代码正文。

您需要将单击保存在变量中，并在每次单击后等待一小段时间，然后再发布最后一篇文章。
这里是一个植入示例，用户每次单击时，他还有100毫秒的时间再次单击，然后将其添加到总单击中。只有最后一次单击才会导致post事件发生，之后单击将重置为0。
在post过程中，该按钮被禁用，以防止进一步单击

$(document).ready(function(){
    var clicks = 0;
    var timeoutId = 0;
    // putting the post in a separate function prevents unnecessary closures 
    var doPost = function(){
        $(".button").attr("disabled", "disabled");
        $.post('/ajax.php', "qty="+clicks, function(){
            $(this).parent().find(input[type='text']).val("1");
            clicks = 0;
            $(".button").removeAttr("disabled");
        });
    };
    $(".button").click(function(){
        clearTimeout(timeoutId);
        timeoutId = setTimeout(doPost, 100);
        clicks++;
    });
});

---

这是一个基本的去抖动问题。将

更改为

，并：

$('.button').click(function(e) {
    var btn = $(this), qty = btn.parent().find('.qty');

    clearTimeout(btn.data('timeout'));

    qty.val(qty.val()+1);

    btn.data('timeout', setTimeout(doPost(qty), 1000));
});

function doPost(el) {
     return function() {
         $.post('/ajax.php', {qty:el.val()});
     }
}

你说的“快”是什么意思？您可能希望使用计时器函数，如（如果不希望包含整个下划线，可以将其删除并单独使用）：

---

不要自己构建一个查询字符串，将一个对象传递给jQuery并让它为您完成。假设您有多个

qty

输入，您不能为每个输入使用相同的

id

。这不是OP要求的，这只是禁用按钮。严格意义上，我不会称之为“去抖动”，既然你真的想注册每一次点击。@WillemD'haeseleer，我们是去公告请求，而不是按钮点击。这是真的！我只是查了一下去Bouncing的真正含义，并没有想到它是什么意思，谢谢你教我一些新东西！

$(document).ready(function(){
    var clicks = 0;
    var timeoutId = 0;
    // putting the post in a separate function prevents unnecessary closures 
    var doPost = function(){
        $(".button").attr("disabled", "disabled");
        $.post('/ajax.php', "qty="+clicks, function(){
            $(this).parent().find(input[type='text']).val("1");
            clicks = 0;
            $(".button").removeAttr("disabled");
        });
    };
    $(".button").click(function(){
        clearTimeout(timeoutId);
        timeoutId = setTimeout(doPost, 100);
        clicks++;
    });
});

$('.button').click(function(e) {
    var btn = $(this), qty = btn.parent().find('.qty');

    clearTimeout(btn.data('timeout'));

    qty.val(qty.val()+1);

    btn.data('timeout', setTimeout(doPost(qty), 1000));
});

function doPost(el) {
     return function() {
         $.post('/ajax.php', {qty:el.val()});
     }
}

<div class='qty'>
   <input type='text' id="qty_num" value='1'>
   <a class='button' id="qty_add" href='#'>add To Basket</a>
   <output id="qty_out">0</output><label for="qty_out"> items in basket</label>
</div>