如何在本机反应中停止setInterval

Question

我正在运行设置一个 setinterval 函数来检查我的本机应用程序中来自 coinbase 的付款，我运行每 10 秒后，付款完成后的功能完成后，我清除 setinterval 并导航到主页，但 setinteval 仍然保持运行ning 我怎么能阻止它？

      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);
    }
  };

Answer 1

您没有使用 myinterval() 中的 return 来清除 setInterval。 setInterval() returns 一个用于清除间隔的id。当您调用函数 myinterval 时，它正在 returning 该 ID。您需要做的是将该 ID 存储在可用于清除间隔的变量中。

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

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

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

Answer 2

我认为这是因为 myinterval 分配给了一个函数，而不是 setInterval() 函数的实际 return 值。所以尝试改变

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

至

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

然后用clearInterval(myinterval);

取消myinterval变量

Answer 3

我运行几个月前遇到过类似的问题，这个解决方案应该可以完美运行：

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

但就我而言，因为我将 setInterval 存储在变量而不是函数中，所以我遇到了一些奇怪的问题，例如 setInterval 可能运行三次或保留在运行ning 甚至在我使用 clearInterval(INTERVAL_NAME); 之后，所以如果您想检查是否已付款，请创建一个按钮，告诉用户在付款后点击，这将是比运行 setInterval

中的函数安全得多

如何在本机反应中停止setInterval

how to stop setInterval in react native

javascript

setinterval

react-native