Question

我有一个加号按钮来增加文本字段中的数字。当文本字段值更改时，会触发#updateCartButton，通过其他一些ajax / php代码更新表单。

我遇到的问题是在快速会话中点击加号按钮5次也会触发#updateCartButton 5次。我想在用户停止点击加号按钮后触发#updateCartButton，可能在500毫秒之后触发。

我尝试解决它setTimeout，就像这样，但它没有解决问题：

  setTimeout(function () {
    $('#updateCartButton').trigger('click'); // trigger update button
  }, 500);

这有一个简单的解决方案吗？

$(function() {
  $('.plus').on('click', function() {
    var oldVal = $('input').val();
    var newVal = (parseInt($('input').val(),10) + 1);
    
    $('input').val(newVal);
    $('#updateCartButton').trigger('click'); // trigger update button
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="plus">+</button>
<input type="text" value="1">

Answer 1

您可以使用setTimeout仅在最后一次点击时调用更新，方法是使用clearTimeout重置之前所有点击的超时。

＆＃13;

$(function() {
  var clickTimeout;

  $('.plus').on('click', function() {
    clearTimeout(clickTimeout);

    var oldVal = $('input').val();
    var newVal = (parseInt($('input').val(),10) + 1);

    $('input').val(newVal);

    clickTimeout = setTimeout(function(){
        $('#output').text($('input').val()); // replace with your update code
    }, 500);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="plus">+</button>
<input type="text" value="1">
<div>Updates on last click: <span id="output">1</span></div>

＆＃13;

Answer 2

设置包含超时的变量。如果您想覆盖它，只需致电clearTimeout();：

$(function() {
var timeout;

  $('.plus').on('click', function() {
    var oldVal = $('input').val();
    var newVal = (parseInt($('input').val(),10) + 1);

    $('input[type="text"]').val(newVal);

    clearTimeout(timeout);

    timeout = setTimeout(function () {
      $('#updateCartButton').trigger('click'); // trigger update button
    }, 500);
  });

   $('#updateCartButton').click(function() {
        $('body').append('delayed button clicked <br/>')
   });
});

JSFiddle

jQuery多次点击，等到用户停止点击

2 个答案: