I have used This common polling function for running background jobs.
export const poll = ({
fn = () => {},
validate = (result) => !!result,
interval = 1000,
maxAttempts = 15,
}) => {
let attempts = 1;
// eslint-disable-next-line consistent-return
const executePoll = async (resolve, reject) => {
try {
const result = await fn();
attempts += 1;
if (validate(result)) {
return resolve(result);
} else if (maxAttempts && attempts > maxAttempts) { // eslint-disable-line no-else-return
return reject(new Error('Exceeded max attempts'));
} else {
setTimeout(executePoll, interval, resolve, reject);
}
} catch (error) {
setTimeout(executePoll, interval, resolve, reject);
}
};
return new Promise(executePoll);
};
I have called this fun on click of button for running polling
poll({
fn: () => some API call ex. api.get(url),
validate: (res) => !res?.data?.lesson_id,
interval: 5000,
maxAttempts: 30,
})
The issue is that after running the above fun in UI I am showing a delete icon on clicking that delete icon I am removing the element for which the above background job is running.
So I want to stop the above polling function after successful deletion.
Note: I have the delete function on that same page so I have control over delete when it is successful.
Any suggestion on what can I change in my common polling function? Thanks.