Question 69866 in Ajax Question posted in
You can find the official documentation here.

Wait after user clicks on button – Jquery ajax

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

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search