Wait after user clicks on button-CodePudding

I have an input number surrounded by two buttons (-/ ) in order to add or remove quantity from this input. Right after the quantity, I have a submit button which launches an ajax code from a module that updates the quantity of the product in a cart.

How can I trigger this button after like 1.5s after the user stops clicking/changing the values from this input (to avoid multiple calls), and intercept when the ajax call is done, so that the user can reuse the input?

This is how I'm increasing the value of the input and started to work with. I can't find the logic to do it after increasing the value...

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

CodePudding user response：

You can use something called debouncing in javascript. Create a function called 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);
  }
}

now you can modify your event handler something like this

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

you can read more about debouncing here

CodePudding user response：

I've ended up with this solution :

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