用户点击按钮后等待答案

【问题标题】：Wait after user clicks on button用户点击按钮后等待
【发布时间】：2021-12-28 10:26:58
【问题描述】：

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

如何在用户停止单击/更改此输入中的值后 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;
  }
});

【问题讨论】：

当用户点击时启动计时器。每次用户点击且计时器尚未结束时重置计时器。当计时器结束时（所以有一段时间没有重置）然后触发你想要的任何功能。

标签： jquery ajax asynchronous

【解决方案1】：

你可以在 javascript 中使用一种叫做 debounceing 的东西。创建一个名为 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

【讨论】：

您的代码正在运行，但也许我不清楚，我需要用户能够多次单击按钮，但我想避免多个 ajax 调用，而不是多个按钮点击

【解决方案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);
        });

【讨论】：