1

我有按钮。单击此按钮发送$.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");

    });

  });

});
4

5 回答 5

2

您需要将点击保存在一个变量中，并在每次点击后等待一小段时间，然后再进行最终发布。
这是一个植入示例，用户每次点击时，他还有 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++;
    });
});
于 2012-12-19T19:20:57.807 回答
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()});
     }
}
于 2012-12-19T19:23:39.920 回答
0

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

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

于 2012-12-19T19:20:15.017 回答
0

“快”是什么意思？可能您想使用像下划线这样的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();
    });
});
于 2012-12-19T19:27:23.937 回答
-2 
$(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");

    });

});
于 2012-12-19T19:13:52.160 回答