I have an async function that makes an API call. It is passed to my setTimeout() in this form:
componentDidMount() {
this.pollingId = setTimeout(this.someOtherFunc, 2000)
}
componentWillUnmount() {
clearTimeout(this.pollingId)// clears an old polling id initialised in previous polling call
}
someOtherFunc = async () => {
await axios.get('/some/api')
clearTimeout(this.pollingId)
if (someConditionToContinuePolling) {
this.pollingId = setTimeout(this.someOtherFunc, 2000) // this will not return a value and update this.pollingId before reloadFunc is over
}
}So in case the API request takes longer, when I navigate to other page while the request is still being processed, componentWillUnmount clears an old pollingId, leaving the other one not cleared up. Is there a way to make setTimeout not wait for the async callback to be finished to return its id?
UPDATE:
I don't mind the current request to finish, my issue is that if I navigate to another page while the request is being processed, componentWillUnmount clears the previous pollingId, and this.someOtherFunc() keeps calling itself through setTimeout() and never stops polling
As mdn says about return value of setTimeout:
The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(). This value can be passed to
clearTimeout()to cancel the timeout.
So you can collect all timeoutID's, put them in an array and run clearTimeout with these Ids. Let's create array that will store all timeoutID's and code would look like this:
componentDidMount() {
this.pollingId = setTimeout(this.reloadFunc, 2000)
this.addIdTimeoutIds(this.pollingId)
}
someOtherFunc = () => {
this.pollingId = setTimeout(this.reloadFunc, 2000)
this.addIdTimeoutIds(this.pollingId)
}
componentWillUnmount() {
this.timeoutIDs.forEach(timeoutId => clearTimeout(timeoutId)
}
addIdTimeoutIds = (pollingId) =>
this.timeoutIDs.push(pollingId)
UPDATE: If you want to abort your request, you can use AbortController (special thanks to Pilchard).
This is an example of using with Axios:
const controller = new AbortController();
axios.get('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
// cancel the request
controller.abort()
I realized the root problem was not connected to clearing correct pollingId. It was about aborting the new initiation of setTimeout calls inside this.someOtherFunc(). Since setTimeout() is calling the function it is inside of, I had a situation of the current callback calling and initiating new setTimeOut again inside of it.
@pilchard 's answer about aborting the already running function call has pushed me towards this solution. Thank you very much!
Just adding a flag to stop polling worked.
componentDidMount() {
this.pollingId = setTimeout(this.someOtherFunc, 2000)
}
componentWillUnmount() {
clearTimeout(this.pollingId)// clears an old polling id initialised in previous polling call
this.stopPolling = true
}
someOtherFunc = async () => {
await axios.get('/some/api')
clearTimeout(this.pollingId)
if (someConditionToContinuePolling && !stopPolling) {
this.pollingId = setTimeout(this.someOtherFunc, 2000) // this will not return a value and update this.pollingId before reloadFunc is over
}
}