Ignore previous asynchronous call and execute the latest

Question

I'm using React,

I have a button that calls an asynchronous function on every onClick event:

<MyButton onClick={handleClick}>
  Next
</MyButton>

Then a function that takes time to load data:

const isExecuting = useRef(false);

const handleClick = async () => {
  if (!isExecuting.current) {
    isExecuting.current = true;
    try {
      resetViews();
      await chargeViews(patientId);
    } finally {
      isExecuting.current = false;
    }
  }
};

So for example when I click 5 times, it will receive 5 calls and all of them will be executed in order, I need a way to just execute the latest call and ignore the previous 4 calls, so it won't take time to execute all of them.

PS: I thought of disabling the button until the function finishes executing, but as I'm using the button to load the next patient, this won't be convinient because we'd be obliged to wait for 4 patients to be loaded to load the 5th patient.

The term to google is "Debounce", for example https://stackoverflow.com/questions/24004791/can-someone-explain-the-debounce-function-in-javascript — James, Mar 31 '22 at 15:06
https://github.com/domenic/last will help you. Source: https://stackoverflow.com/questions/23277694/can-i-ignore-a-promise-in-javascript — Yusuf İlker Oğuz, Mar 31 '22 at 15:12

score 1 · Answer 1 · answered Mar 31 '22 at 15:54

Debounce is one option and the option is to pass ref and get it cancelToken when you are trying to hit again the same API it will cancel the previous call If exist and call the new API request the below example is the general solution or you can send cancelToken from component and call it before the new API call

// dummy Api
const chargeViews = async (sourceRef,patientId) => {
  console.log({patientId})
  try {
    let token = undefined;
    if (sourceRef) {
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();
      token = { cancelToken: source.token };
      sourceRef.current = source;
    }
    const response = await Axios.get(`endpointURL`, token)
    return response.data;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } catch (err: any) {
    throw new Error(err);
  }
};

component

const sourceRef = React.useRef(null);

const handleClick = async () => {
    try {
      if (sourceRef.current) sourceRef.current.cancel();
      await chargeViews(sourceRef, patientId);
    } catch (error) {
      console.log(error)
    }
};

<MyButton onClick={handleClick}>
  Next
</MyButton>

I see that you used axios, I'm not loading data from a server, but from an image, does the solution still convinient for my situation? — Oussama Eddahri, Apr 02 '22 at 20:54
I'm using a library, so in chargeViews I'm not using axios, I'm using a function from that library that take an URL of an image in the server and return a promise containing image data. — Oussama Eddahri, Apr 03 '22 at 11:34
oh! so see the documentation of that library on how to cancel requests that a common behavior to cancel request. — Abbas Hussain, Apr 03 '22 at 14:33

Ignore previous asynchronous call and execute the latest

1 Answers1