如何在本机反应中停止 setInterval

Question

我正在运行setinterval function 以在我的 react 本机应用程序中检查来自 coinbase 的付款，我每 10 秒运行一次 function，付款完成后，我清除setinterval并导航到主页，但setinteval仍然存在运行我怎么能阻止这个？

      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被分配给 function 而不是setInterval() function 的实际返回值。 所以试着改变

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

至

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

然后用clearInterval(myinterval);取消myinterval变量；

Answer 2

几个月前我遇到了类似的问题，这个解决方案应该可以完美地工作：

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

但在我的情况下，由于我将setInterval存储在一个变量而不是 function 中，所以我遇到了一些奇怪的问题，比如setInterval可能会运行 3 次，或者即使在我使用clearInterval(INTERVAL_NAME); 因此，如果您想检查是否已付款，请创建一个按钮，告诉用户在付款后点击，这比在setInterval内运行 function 安全得多

Answer 3

您没有使用myinterval()的返回值来清除setInterval 。 setInterval()返回一个用于清除间隔的 id。 当您调用 function myinterval ，它会返回该 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);
    }
}