i am running a setinterval function to check for a payment from coinbase in my react native app, i run the function after every 10 seconds, after the payment has been made, i clear the setinterval and navigate to the homepage, but still the setinteval keeps running how can i stop this?

      useEffect(() => {
        getData();
        myinterval();
      }, []);
    
      const myinterval= () => setInterval(function () {
        checkCharge();
      }, 10000);

      const stopCounter = () => {
        clearInterval(myinterval);
      }

  const checkCharge = async () => {
    try {
      ...SOME_CODE_HERE...
      stopCounter()        
      navigation.navigate("HomeScreen");
          
    } catch (e) {
      console.log(e);
    }
  };

i am running a setinterval function to check for a payment from coinbase in my react native app, i run the function after every 10 seconds, after the payment has been made, i clear the setinterval and navigate to the homepage, but still the setinteval keeps running how can i stop this?

      useEffect(() => {
        getData();
        myinterval();
      }, []);
    
      const myinterval= () => setInterval(function () {
        checkCharge();
      }, 10000);

      const stopCounter = () => {
        clearInterval(myinterval);
      }

  const checkCharge = async () => {
    try {
      ...SOME_CODE_HERE...
      stopCounter()        
      navigation.navigate("HomeScreen");
          
    } catch (e) {
      console.log(e);
    }
  };

• javascript
• react-native
• setinterval

Share Follow asked Feb 2, 2022 at 22:04 orenzo foodsorenzo foods 7311 silver badge66 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

i ran into a similar problem some months back, this soluion should work perfectly:

const myinterval = setInterval(function () {
      checkCharge();
 }, 10000);

but in my case, since I store the setInterval in a variable instead of a function, I had some weird problems, like the setInterval might run three times or keep on running even after I used clearInterval(INTERVAL_NAME); so if you want to check if a payment has been made, create a button that would tell the user to click when they have made the payment, this would be a lot safer than to run the function inside of setInterval

I believe it's because myinterval is assigned to a function and not the actual return value of the setInterval() function. So try to change

const myinterval = () => setInterval(function () {
        checkCharge();
      }, 10000);

to

const myinterval = setInterval(function () {
        checkCharge();
      }, 10000);

and then canceling the myinterval variable with clearInterval(myinterval);

You aren't using the return from myinterval() to clear the setInterval. setInterval() returns an id that is used to clear the interval. When you call the function myinterval, it is returning that ID. What you need to do is store that ID in a variable that you can use to clear the interval.

...
function createInterval(){
    return setInterval(checkCharge, 10000);
}

function stopCounter(id){
    clearInterval(id);
}
...
var id = createInterval();
...

function checkCharge(){
    try {
        ...
        stopCounter(id);
        ...
    } catch(e){
        console.error(e);
    }
}

Hold myinterval in a state

import { useState } from 'react'

const [refreshId, setRefreshId] = useState() 

const myInterval = setInterval(function () { checkCharge() }, 10000)

setRefreshId(myInterval)

const stopCounter = () => { clearInterval(refreshId) }

Just in case someone is using Animated ponent and intervals, I had to clear the interval in the callback function in the start method, clearing the interval after or before was not clearing at all.

Animated.timing(
        dynamicCircle,
        {
          toValue: 0,
          useNativeDriver: true,
          duration: 1,
        }
      ).start(() => {
        clearInterval(circleAnimationInterval);
      });