等待用户点击按钮

Question

我有一个输入数字，周围有两个按钮 (-/+)，以便从此输入中添加或删除数量。在数量之后，我有一个 提交按钮 ，它从更新产品数量的模块中启动 ajax 代码 购物车。

如何在用户停止 clicking/changing 来自此输入的值（以避免多次调用）后大约 1.5 秒后触发此按钮，并在 ajax 调用完成后进行拦截，所以用户可以重复使用输入？

这就是我增加输入值并开始使用的方式。增加值后找不到执行的逻辑...

let currentAdding = false;
$(document).on('click', '[data-action="more"]', function() {
  let input = $(this).siblings('input[type="number"]');
  let val = input.val();
  let total = parseInt(val) + parseInt(1);
  input.val(total)
  if (currentAdding === false) {
    $(this).parents('form').find('input[type="submit"]').trigger('click') //this click trigger an ajax call from a module
    //set currentAdding after the ajax is done
    currentAdding = true;
  }
});

Answer 1

您可以在 javascript 中使用一种叫做去抖动的东西。创建一个名为 debounce

的函数

function debounce(func, delay) {
  var debounceTimer
  return function() {
    var context = this
    var args = arguments
    clearTimeout(debounceTimer)
    debounceTimer = setTimeout(function() { func.apply(context, args); }, delay);
  }
}

现在您可以像这样修改您的事件处理程序

let currentAdding = false;
$(document).on('click','[data-action="more"]', debounce(function() {
  let input = $(this).siblings('input[type="number"]');
  let val = input.val();
  let total = parseInt(val)+parseInt(1);
  input.val(total)
  if(currentAdding === false) {
   $(this).parents('form').find('input[type="submit"]').trigger('click') //this click trigger an ajax call from a module
   //set currentAdding after the ajax is done
   currentAdding = true;
  }, 1500); // 1.5 seconds delay
});

您可以阅读有关去抖动的更多信息here

Answer 2

我最终得到了这个解决方案：

let currentLess = false;
        var typingTimer = null;
        var doneTypingInterval = 1000;

        $(document).on('click', '[data-action="less"]', function() {
            if(typingTimer !== null) {
                clearTimeout( typingTimer );
            }
            console.log('click less')
            let button = $(this)
            let input = button.siblings('input[type="number"]');
            if(button.siblings('.field--name-variations').length > 0) {
                input = button.siblings('.field--name-variations').find('input');
            }

            let val = input.val();
            const min = input.attr('min')
            let total = parseInt(val)-parseInt(1);
            input.val(val === min ? val : total);
            typingTimer = setTimeout(function() {
                console.log("update")
                //if(currentLess === false) {
                    ajaxAddToCartTrigger(button)
                //}
            }, doneTypingInterval);
        });

等待用户点击按钮

Wait after user clicks on button

ajax

jquery

asynchronous