Как обновлять значения корзины после остановки (с задержкой) изменения кол-во товаров по кнопкам?

Question

[Владимир]

Сайт на Wordpress + Woocommerce

В данный момент для автоматического обновления корзины используется следующий скрипт:

jQuery( function( $ ) {
	$( 'body' ).on( 'change', '.qty', function() { // поле с количеством имеет класс .qty
		 setTimeout(function() { 
                    $( '[name="update_cart"]' ).trigger( 'click' );
                }, 1300 );
	} );
	
		$( 'body' ).on( 'click', '.quantity-button.inc, .quantity-button.dec', function() { // элементы инкремента/декремента 
		 setTimeout(function() { 
                    $( '[name="update_cart"]' ).trigger( 'click' );
                }, 1300 );
	} );
} );

С момент когда человек нажимает на кнопку изменения количества, есть задержка 1300 м/сек. Но хотелось бы улучшить этот код и сделать так, чтобы задержка обновлялась при каждом нажатии на кнопку.

Т.е. сейчас человек может добавлять в корзине продукт на кнопку "+" и через 1300 м/сек она в любом случае обновится.
А надо прейти к тому, чтобы пока человек нажимает на эту кнопку, таймаут каждый раз обновлялся пока он не остановится:)

Answer 1

[Михаил]

Что-то такое?

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
  jQuery(function($) {
    var updateCart = _.debounce(function() {
      $('[name="update_cart"]').trigger('click');
    }, 1300);

    $('body').on('change', '.qty', function() {
      updateCart();
    });

    $('body').on('click', '.quantity-button.inc, .quantity-button.dec', function() {
      updateCart();
    });
  });
</script>

Answer 2

[Stalker_RED]

Гугл: js Throttle/debounce
https://medium.com/nuances-of-programming/%D1%87%D...

Comments

[Владимир]

Спасибо за наводку, поставил плагин для debounce https://benalman.com/projects/jquery-throttle-debo... , но не могу понять как будет верно выглядеть итоговый вариант кода? Не получается применить, может сможете подсказать на примере выше?