Wait after user click on button-CodePudding

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

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

This is how I've increasing the value of the input and started to works 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);
        });