Skip to content

Instantly share code, notes, and snippets.

@Kadreev
Created October 16, 2025 23:03
Show Gist options
  • Select an option

  • Save Kadreev/f51f22a66c1fbd388f9bcd2987d33779 to your computer and use it in GitHub Desktop.

Select an option

Save Kadreev/f51f22a66c1fbd388f9bcd2987d33779 to your computer and use it in GitHub Desktop.
DebounceATC

handleQuantityButton(button) { const container = button.parentElement; const input = container?.querySelector('input[data-qty-input]'); const display = container?.querySelector('[data-qty-render]');

if (!input) return;

const currentQty = parseInt(input.value) || 0; const isPlus = button.dataset.qty === 'plus'; const newQty = isPlus ? currentQty + 1 : Math.max(0, currentQty - 1);

// IMMEDIATE visual update (no wait) input.value = newQty; if (display) display.textContent = newQty;

const lineIndex = input.dataset.index || input.dataset.qtyIndex; if (lineIndex) { // Use debounced version for API call this.debouncedUpdateQuantity(lineIndex, newQty, input.getAttribute('name')); } }

// Add in constructor: constructor() { super(); // ... existing code ...

// Separate debounced method for quantity updates this.debouncedUpdateQuantity = debounce( (line, qty, name) => this.updateQuantity(line, qty, name), 300 ); }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment