Question

我有按钮。点击此按钮发送$.post()请求并将项目添加到购物篮。我希望如果用户快速点击按钮十次，它不能发送10个请求，但只有一个宽度计数10。像这样的代码：

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

</div>

脚本：

$(document).ready(function(){

  $(".button").click(function(){

    var qty=$(this).parent().find(input[type='text']).val();

    $.post('/ajax.php', "qty="+qty, function(){
      $(this).parent().find(input[type='text']).val("1");

    });

  });

});

Answer 1

您需要保存变量中的点击次数，并在每次点击后等待很短的时间，然后再发布最终帖子。
这是一个植入示例，每次用户点击时他再次点击100毫秒，然后将其添加到总点击次数中。只有最后一次点击才会发生发布事件，之后点击将重置为0 在帖子期间，该按钮被禁用以防止进一步点击。

$(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++;
    });
});

Answer 2

这是一个基本的去抖动问题。将<input id="qty">更改为<input class="qty">并：

$('.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()});
     }
}

Answer 3

您可setTimeout .button#onclick处理$.post()处理.button#onclick的一小段时间（例如1秒）（而不是直接发布值）。必须将超时处理程序全局保存到所有.button#onclick执行的变量中。此外，每{{1}}次执行必须检查主要超时是否仍然有效。如果是，则终止旧超时并设置新超时。如果没有，只需设置新的。

因此，每次单击按钮都会终止旧超时并设置新超时。只会执行最后一次单击的setTimeout代码体。

Answer 4

“快”是什么意思？可能你想使用像Underscore's debounce这样的计时器功能（如果你不想包括整个下划线，你可以将它剪掉并单独使用它）：

<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>

$(document).ready(function() {
    var count = 0;
    function send() {
        $.post('/ajax.php', {qty: count}, function(result){
            $("#qty_out").val(result);
        });
        count = 0; // reset
    }
    var sendAfterSecond = _.debounce(send, 1000); // here
    $("#qty_add").click(function(e) {
         var num = parseInt($("#qty_num").val());
         count += num;
         sendAfterSecond();
    });
});

Answer 5

$(document).ready(function(){

    $(".button").click(function(){

    // disable the button
    $(this).attr("disabled", "disabled"); // if its a submit button

    var qty=$(this).parent().find(input[type='text']).val();

    // request some thing back in json {"success":1} or 0 if failed to add to cart.
    $.post('/ajax.php', "qty="+qty, function(m){ 
            if(m.success==1)
            {
                // enable the button
                $(".button").removeAttr("disabled"); // if its a submit button
            }

            $(this).parent().find(input[type='text']).val("1");
        },"json");

    });

});

jquery优化ajax请求？ php和js

5 个答案: