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

Question

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

我遇到的问题是在快速 session 中单击加号按钮 5 次也会触发 #updateCartButton 5 次。我希望一旦用户停止单击加号按钮(可能在 500 毫秒或其他时间后)就触发 #updateCartButton。

我尝试解决它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 重置所有先前点击的超时。

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