jQuery多次单击，直到用户停止单击为止

Question

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

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

我试图setTimeout像这样解决它，但不能解决问题：

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

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

  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
  });
});

Answer 1

您可以使用setTimeout来clearTimeout重置所有先前的点击超时，从而仅在最后一次点击时调用更新。

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

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