One async call per button. How do I handle users clicking multiple buttons in quick succession?

Question

I've an admin page with multiple buttons that make axios calls to change the content. Each button makes a different call.

When the user clicks button 1, data is retrieved from the server to be displayed onscreen. But if the user clicks button 1, then 2 in quick succession, the UI displays data from 1, then 2.

This isn't necessarily a massive problem, but I would like to know the best approach, as it does cause me issues when animating the data with gsap (see below).

Is the best approach to try and using tokens to cancel the axios request?

Codepen: Non-animation example A slightly different example with animation

JS

document.body.addEventListener('click', async e => {
  const item1 = e.target.closest('.item1');
  const item2 = e.target.closest('.item2');
  const item3 = e.target.closest('.item3');
    
    if(item1) {
      await dummyAsync(); 
      changeContent(1);
    }
    if(item2) {
      await dummyAsync();  
      changeContent(2);
    }
    if(item3) {
      await dummyAsync();
      changeContent(3);
    }
});

function dummyAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), 2000);
  });
}

function changeContent(item) {
  // Clear previous content
  const wrapper = document.querySelector('.content-wrapper');
  while(wrapper.firstChild) wrapper.removeChild(wrapper.firstChild);
  
  const dummyTable = `<div class="table">This is table number: ${item}</div>`;
  
  // Add table
  wrapper.insertAdjacentHTML('afterbegin', dummyTable);
};

HTML & CSS

<div class="menu">
  <div class="item item1">Item1</div>
  <div class="item item2">Item2</div>
  <div class="item item3">Item3</div>
</div>
<div class="content-wrapper">
  <div class="content">Content</div>
</div>

.menu { 
  display: flex;
  justify-content: space-evenly;
  width: 20rem;
  border: 1px solid lightgrey; 
}
.item {
  cursor: pointer;
  padding: 1rem;
  z-index: 2;
}

.content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  border: 1px solid lightgrey; 
  height: 20rem;
}

.table {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25rem;
  height: 10rem;
  border: 1px dotted grey;
}

Answer 1

You'd want to use a debounce for this, this limits the number of function calls that are made in a certain period of time.

Here's an example using your code: https://codepen.io/rdenton93/pen/MWOoBVK

import lodashDebounce from "https://cdn.skypack.dev/[email protected]";

document.body.addEventListener('click', async e => {
  const item1 = e.target.closest('.item1');
  const item2 = e.target.closest('.item2');
  const item3 = e.target.closest('.item3');
     
    if(item1) {
      await dummyAsync(); 
      changeContent(1);
    }
    if(item2) {
      await dummyAsync();  
      changeContent(2);
    }
    if(item3) {
      await dummyAsync();
      changeContent(3);
    }
})

function dummyAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), 2000);
  });
}

const changeContent = lodashDebounce((item) => {
  // Clear previous content
  const wrapper = document.querySelector('.content-wrapper');
  while(wrapper.firstChild) wrapper.removeChild(wrapper.firstChild);
  
  const dummyTable = `<div class="table">This is table number: ${item}</div>`;
  
  // Add table
  wrapper.insertAdjacentHTML('afterbegin', dummyTable);
},1* 1000); // only make one request per second